如何在角度 4 中创建自定义 .hasError 条件答案

【问题标题】：How To create a Custom .hasError condition in angular 4如何在角度 4 中创建自定义 .hasError 条件
【发布时间】：2018-06-19 19:24:10
【问题描述】：

我正在努力将以前具有必填字段的 html 表单更改为现在成为可选字段。对那些曾经实现 .hasError('required') 的字段进行的检查，这会导致提交按钮被禁用，因为它会发送一个侦听器会接收到的错误。当他们错误地填写可选字段时，我仍然需要禁用提交按钮，但不能再使用“必需”，在这种情况下，使用“最小长度”或“最大长度”检查也不适用。有没有办法制作自定义 .hasError ？或者有没有办法在发生此类错误时手动发出错误？

下面是成功禁用按钮的旧行，我当前使用的行具有正确的检查并显示所需的内容，但不会禁用按钮。

<span class="haserror"*ngIf="editMode&&canPersistUser&&accountForm.get('passwordInfo').get('rpassword').touched && 
accountForm.get('passwordInfo').get('rpassword').hasError('required') && editMode">This Field can not be left empty.</span>

和

<span class="has-error"*ngIf="editMode && canPersistUser && accountForm.get('passwordInfo').get('password').value != ''  
&&accountForm.get('passwordInfo').get('rpassword').pristine  && editMode">You must confirm your password if you plan to set one up.</span>

【问题讨论】：

标签： javascript html angular dom-events

【解决方案1】：

你能展示一下你是如何创建FormGroup的代码吗？

每当您删除 Validators.required 并保留其他验证器时，表单组应该将成员 invalid 设置为 true，以便您可以在 sumbit 按钮上使用类似：

   <button [disabled]="accountForm.invalid"></button>

【讨论】：