formArray 的多个垫错误无法弄清楚

Question

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

<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,

//This field is required

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

// Invalid Email Provided

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

Answer 1

您无法同时显示验证消息的原因是源代码本身。

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

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

如果您不知道该怎么做，the documentation about custom validators 可以帮助您。

Answer 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' : '';
  }

formArray 的多个垫错误无法弄清楚

multiple mat-error for formArray unable to figureout

angular-material

angular

angular-material-stepper