Question

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

1个字符大写。
1个字符的小写字母。
最小长度应为8。
最大长度为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

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

Ex：

play-services-vision

具有相同错误（例如：“模式”）的多个错误将被覆盖。

因此，如果要使用相同的模式验证器，则应编写自定义<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>。

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;
    };
  }

html

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

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>

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

2 个答案: