множественная ошибка mat для formArray, не в состоянии вычислить - PullRequest
Новая
       31

множественная ошибка mat для formArray, не в состоянии вычислить

0 голосов
/ 06 ноября 2018

Я хочу иметь несколько сообщений об ошибках и не могу понять, как это сделать ..? Здесь мне нужно проверить каждый шаг отдельно, поэтому я использую этот степпер 

<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-]+)+$"

// Предоставлено неверное электронное письмо 

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

1 Ответ

0 голосов
/ 06 ноября 2018

Причина, по которой вы не можете видеть оба сообщения проверки, заключается в самом исходном коде.

Если вы откроете исходный код в их официальном репозитории, в правой строке вы увидите, что средство проверки электронной почты не выдает ошибку для пустых значений.

Если вы хотите отобразить обе ошибки, вам придется самостоятельно переписать валидатор и предоставить его для собственного элемента управления формой.

Если вы не знаете, как это сделать, у вас есть документация о пользовательских валидаторах , чтобы помочь вам.

...