如何将错误附加到 Angular 中的 FormGroup？

Question

我是 Angular 的新手，我已经创建了这个自定义验证器来检查两个控制器的值是否不匹配。到目前为止，验证器可以工作，如果值不匹配，它将向控制器附加一个错误。但我真正想要的是将错误附加到表单本身，因为这是一个 FormGroup 验证器。怎么做？

this.createAccountForm = this.builder.group({
  pass: this.builder.control('',
    [
      Validators.required,
      Validators.minLength(5)
    ]),
  confirmPass: this.builder.control('',
    [
      Validators.required,
      Validators.minLength(5)
    ]),
}, { validator: CustomValidators.isControllersMatched('pass', 'confirmPass') });

static isControllersMatched(c1: string, c2: string) {
return (group: FormGroup) => {
  let c1Input = group.controls[c1],
    c2Input = group.controls[c2];
  if (c1Input.value !== c2Input.value) {
    return c2Input.setErrors({ notEquivalent: true });
  }
  else {
    return c2Input.setErrors(null);
  }
}

}

Answer 1

我宁愿使用这样的验证器

 export const isControllersMatched: ValidatorFn = (control: 
       AbstractControl): ValidationErrors | null => {
   const pass = control.get('pass');
   const confirmPass = control.get('confirmPass');

   return pass && confirmPass && pass.value === confirmPass.value ? null 
       : { passesDonotMatch: true };
 };

FormBuilder 看起来像这样

 this.createAccountForm = this.builder.group({
  pass: this.builder.control('',
    [
      Validators.required,
      Validators.minLength(5)
    ]),
  confirmPass: this.builder.control('',
    [
      Validators.required,
      Validators.minLength(5)
    ]),
}, { validator: isControllersMatched });

最后 HTML

    <div *ngIf="(createAccountForm.get('confirmPass')?.touched || 
       createAccountForm.get('confirmPass')?.dirty) && 
       createAccountForm.hasError('passesDonotMatch')"
       class="cross-validation-error-message alert alert-danger">
          Passwords do not match
    </div>

如何将错误附加到 Angular 中的 FormGroup？

How to attach an error to a FormGroup in Angular?

angular