formArray 的多个 mat-error 无法弄清楚答案

【问题标题】：multiple mat-error for formArray unable to figureoutformArray 的多个 mat-error 无法弄清楚
【发布时间】：2019-04-09 13:47:13
【问题描述】：

我想要多条错误消息，但不知道该怎么做..？在这里我需要分别验证每个步骤，这就是我使用这个步进器的原因

<form [formGroup]="formGroup" method="POST" #f="ngForm">
    <mat-vertical-stepper #linearVerticalStepper="matVerticalStepper" formArrayName="formArray" [linear]="true">
        <mat-step formGroupName="0" [stepControl]="formArray?.get([0])">
            <mat-form-field>
               <mat-label>Email</mat-label>
               <input matInput formControlName="emailCtrl" required>
               <mat-error>This field is required</mat-error>
               <mat-error>Invalid Email</mat-error>
            </mat-form-field>
        </mat-step>
   </mat-vertical-stepper>
</form>

表单生成器是：-

ngOnInit() {
    this.formGroup = this._formBuilder.group({
      formArray: this._formBuilder.array([
        this._formBuilder.group({
          emailCtrl: [
            "",[
            Validators.required,

//此字段为必填项

            Validators.pattern(
              "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$"

// 提供的电子邮件无效

            )]
          ],
        }),
      ])
    });
  }

【问题讨论】：

你想达到什么目的？
我想为两种不同类型的案例显示两条不同的消息，即First Name is required First Name should be in between 2-30 char
我认为即使没有触摸表单字段或更改值，您也想显示 mat 错误。是吗？正如@tricheriche 所说，当输入中没有值时，Validators.pattern、Validators.email 或 Validators.maxLength 不会出现错误

标签： angular angular-material angular-material-stepper

【解决方案1】：

您不能同时显示两个验证消息的原因是源代码本身。

如果您打开source code on their official repository, on the right line，您将看到电子邮件验证器不会针对空值弹出错误。

如果您希望显示这两个错误，您必须自己覆盖验证器并将其提供给您自己的表单控件。

如果你不知道怎么做，你有the documentation about custom validators 来帮助你。

【讨论】：

我想为两种不同类型的案例显示两条不同的消息，即First Name is required First Name should be in between 2-30 char
我向你解释过它不是那样工作的，我向你解释过如何让它像那样工作。你至少读过我的回答吗？

【解决方案2】：

我知道为时已晚。但我认为这将有助于未来的参考。这是在他们的官方示例中。如果您仔细查看他们的电子邮件验证错误消息，它将是这样的。

 <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error

在 ts 文件中，您必须根据错误定义要显示的消息

getErrorMessage() {
if (this.email.hasError('required')) {
  return 'You must enter a value';
}

return this.email.hasError('email') ? 'Not a valid email' : '';
  }

【讨论】：