在 angular 中的 ngClass 中使用 form.controls.errors.(myError)（错误来自 AbstractControl）时遇到问题

Question

我已经使用 abstractControl 创建了一个验证（在 ReactiveForm 中）并想在 ngClass 中使用它。

这是我的代码：

inputForm = new FormGroup({
   current_password: new FormControl('', [
      Validators.required
   ]),
   new_password: new FormControl('', [
     Validators.required
   ]),
   re_new_password: new FormControl('', [
     Validators.required
   ])
  }, [
   (form: AbstractControl) => {
     if (form.value.new_pass === form.value.re_new_pass) {
       return null;
     }
     return { equation: true }
   }
 ])

html:

<form [formGroup]="inputForm">
   <div>
      <label>Current Password : </label>
      <input class="form-input" formControlName="current_password">
   </div>
   <div>
      <label>Password : </label>
      <input class="input-form" formControlName="new_password" [ngClass]="{ 'red-border': inputForm.errors.equation }">
   </div>
   <div>
      <label>Password Confirmation : </label>
      <input class="input-form" formControlName="re_new_password" [ngClass]="{ 'red-border': inputForm.errors.equation }">
   </div>
</form>

当此表格获得有效方程式时，错误将变为 null 并且那就是我对 ngClass 有疑问的地方因为没有调用 'equation'

的错误

我该如何解决这个问题？

Answer 1

您需要 ?. 可选链接来避免可能为空的错误。

因为 FormGroup 的错误是 ValidationErrors 或 null 类型。

errors: ValidationErrors | null

<input
  class="input-form"
  formControlName="new_password"
  [ngClass]="{ 'red-border': inputForm.errors?.equation }"
/>

<input
  class="input-form"
  formControlName="re_new_password"
  [ngClass]="{ 'red-border': inputForm.errors?.equation }"
/>

并更正 new_pass 和 re_new_pass 不存在的说法，因为 FormControl（打字错误）如下：

if (form.value.new_password === form.value.re_new_password)

Sample Demo on StackBlitz

Answer 2

像下面这样更改您的 .ts 文件

  inputForm = new FormGroup({
    current_password: new FormControl('', [
      Validators.required
    ]),
    new_password: new FormControl('', [
      Validators.required
    ]),
    re_new_password: new FormControl('', [
      Validators.required
    ])
  }, [
    (form: FormGroup) => {
      if (form.controls.new_password.value === form.controls.re_new_password.value) {
        return null;
      }
      return {equation: true}
    }
  ])

你的模板必须是这样的

  <form [formGroup]="inputForm">
    <div>
      <label>Current Password : </label>
      <input class="form-input" formControlName="current_password">
    </div>
    <div>
      <label>Password : </label>
      <input class="input-form" formControlName="new_password"
             [ngClass]="{ 'red-border': inputForm.errors?.equation}">
    </div>
    <div>
      <label>Password Confirmation : </label>
      <input class="input-form" formControlName="re_new_password"
             [ngClass]="{ 'red-border': inputForm.errors?.equation}">
    </div>
  </form>

注意问号。它确保您不会看到 null 和 undefined。

在 angular 中的 ngClass 中使用 form.controls.errors.(myError)（错误来自 AbstractControl）时遇到问题

having problem using form.controls.errors.(myError) (error is from AbstractControl) in ngClass in angular

angular

forms

angular-forms

angular-reactive-forms