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

Question

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

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

根据需要，这是我的组件代码。

this.userForm = this.appFormBuilder.group({
  password:['',[Validators.pattern(/[a-z]/),Validators.pattern(/[A-Z]/), 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

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

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>