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

Posted 2023-05-07

【中文标题】formArray 的多个 mat-error 无法弄清楚

【英文标题】：multiple mat-error for formArray unable to figureout

【发布时间】：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-]+)+$" 

// 提供的电子邮件无效

            )]
          ],
        ),
      ])
    );
  

【问题讨论】：

你想达到什么目的？

我想为两种不同类型的案例显示两条不同的消息，即<p *ngIf="FirstName.errors.required" class="color-red pad4">First Name is required</p> <p *ngIf="FirstName.errors.maxlength || FirstName.errors.minlength" class="color-red pad4">First Name should be in between 2-30 char</p>

我认为即使没有触摸表单字段或更改值，您也想显示 mat 错误。是吗？正如@tricheriche 所说，当输入中没有值时，Validators.pattern、Validators.email 或 Validators.maxLength 不会出现错误

【参考方案1】：

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

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

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

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

【讨论】：

我想为两种不同类型的案例显示两条不同的消息，即<p *ngIf="FirstName.errors.required" class="color-red pad4">First Name is required</p> <p *ngIf="FirstName.errors.maxlength || FirstName.errors.minlength" class="color-red pad4">First Name should be in between 2-30 char</p>

我向你解释过它不是那样工作的，我向你解释过如何让它像那样工作。你至少读过我的回答吗？

【参考方案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' : '';