如何使用不同的错误消息多次在FormControl上使用Angular模式验证器

Question

我正在开发重置密码表单，我想通过一些验证来验证密码字段。 验证如下：

1. 1个字符大写。
2. 1个字符LowerCase。
3. 最小长度应为8。
4. 最大长度为10。

这是我需要的组件代码。

 this.userForm = this.appFormBuilder.group({ password:['',[Validators.pattern(/[az]/),Validators.pattern(/[AZ]/), Validators.min(8),Validators.max(10)]] }) 

我想在UI上显示相应条件的错误消息已失败，但我在UI上获取模式错误对象。 如何显示相应条件的错误消息失败。 这是我的Html代码：

 <div [formGroup]="userForm"> <input type="text" formControlName="password" /> {{userForm.controls.password.errors | json}} </div> 

Answer 1

您可以从特定的验证名称获取错误消息。

例如：

<div [formGroup]="userForm">
  <input type="text" formControlName="password" />
  {{userForm.controls.password.errors. pattern}}
  <div *ngIf="f.firstName.errors.min">Min length should be 8</div>
  <div *ngIf="f.firstName.errors.max">Min length should be 10</div>
  <div *ngIf="f.firstName.errors.pattern">Pasword format must be xyz format</div>
</div>

具有相同错误的多个错误（例如：'pattern'）将被覆盖。

因此，如果要使用相同的模式验证器，则应编写自定义validator 。

 regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} => {
      if (!control.value) {
        return null;
      }
      const valid = regex.test(control.value);
      return valid ? null : error;
    };
  }

-

 this.regexValidator(new RegExp('[a-z]'), {'smallLetters': ''}),
 this.regexValidator(new RegExp('[A-Z]'), {'capitalLetters': ''})

HTML

<div *ngIf="r.firstName.hasError('precision')">It must have small letter </div>

Answer 2

您可以创建一个将验证表单控件的函数

export function validatPatternMatch(control: AbstractControl): {[key: string]: boolean}  {
  const age = control.value;
  if(condition1 fails){
    return {lowercase: true};
  }else if(condition2 fails){
    return {uppercase: true};
  }
  return null; // no error
}

this.userForm = this.appFormBuilder.group({
  password:['',[validatPatternMatch]]
});

<div [formGroup]="userForm">
  <input type="text" formControlName="password" />
   {{userForm.controls.password.errors. pattern}}
  <div *ngIf="f.firstName.errors?.lowercase">One Lowercase</div>
  <div *ngIf="f.firstName.errors?.uppercase">One Uppercase</div>