多个validator.pattern Angular 7的错误消息答案

【问题标题】：Error message for multiple validator.pattern Angular 7多个validator.pattern Angular 7的错误消息
【发布时间】：2019-11-29 10:02:06
【问题描述】：

我有一个使用 Angular 7 的响应式表单，每个字段都有多个要验证的模式。我想为每个模式生成一条错误消息，但我找不到识别它们的方法。

在我的 Ts 文件中，我有这样的内容：

myfield: ['', [ //Validators.pattern(/^/), Validators.pattern(/^/), Validators.pattern(/^/)]],

在我的html文件中；

 pattern error

我希望能够将我的每个模式分开以显示适当的错误消息比如：

 pattern error 1

 pattern error 2

对此有什么想法吗？我的表单有很多字段、验证器和组件。所以我正在寻找一种简单的方法。

【问题讨论】：

标签： angular validation angular7 angular-validation

【解决方案1】：

您需要自定义验证器 (https://angular.io/guide/form-validation#custom-validators)：

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: {message: string} } | null => {

    if (!new Regexp(/regexpPattern1Here/).test(control.value)) {
      return {
        pattern1Error: {
          message: `Error message for pattern 1`
        }
      };
    } 

    if (!new Regexp(/regexpPattern2Here/).test(control.value)) {
      return {
        pattern2Error: {
          message: `Error message for pattern 2`
        }
      };
    } 

   return null;
  };
}

而不是做

myfield: ['', [
        //Validators.pattern(/^/),
        Validators.pattern(/^/),
        Validators.pattern(/^/)]],

，做

myfield: ['', [customValidator()]],

【讨论】：

【解决方案2】：

模式验证器在其 ValidationErrors 对象中返回违反的模式。所以你可以像这样利用它：

<p class="error" *ngIf="myFormGroup.get('myField').errors?.pattern">
  <ng-container *ngIf="myFormGroup.get('myField').errors.pattern.requiredPattern === pattern1">Pattern 1 Error</ng-container>   
   <ng-container *ngIf="myFormGroup.get('myField').errors.pattern.requiredPattern === pattern2">Pattern 2 Error</ng-container>
</p>

等等。这里的一个限制是它一次只能返回一个违反模式，因为错误对象的性质是一次只能有一个模式违反的键控对象。如果您需要一次显示多个模式错误，那么您将需要一个支持多个模式的自定义验证器。

【讨论】：

你好，请问有具体的例子吗？