Материал Angular6 - использование Stepper с вводом с пользовательским ErrorStateMatcher

Question

Кажется, что это должно быть довольно просто... внутри степпера вы собираете информацию и хотите убедиться, что электронное письмо является электронным письмом. Но похоже, что общий тег 'form' вызывает некоторые проблемы, из-за которых проверка ошибок не работает?

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

     formControlName="emailCtrl"

Когда я удаляю эту строку и удаляю ее родственную строку из.ts (emailCtrl: ['', Validators.required],), проверка ошибок начинает работать. Однако это означает, что степпер не может проверить, требуется ли этот шаг.

Как я могу убедиться, что степпер проверяет запись и в то же время убедиться, что ErrorStateMatcher работает?

Вот мой комбинированный HTML...

<mat-step [stepControl]="infoFormGroup">
    <form [formGroup]="infoFormGroup">
        <ng-template matStepLabel>Profile Information</ng-template>

        <div>
            <!-- <form class="emailForm"> -->
                <mat-form-field class="full-width">
                    <input matInput placeholder="Username" [formControl]="emailFormControl" 
                        formControlName="emailCtrl"
                        [errorStateMatcher]="infoMatcher"> 
                    <mat-hint>Must be a valid email address</mat-hint>
                    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                        Please enter a valid email address for a username
                    </mat-error>
                    <mat-error *ngIf="emailFormControl.hasError('required')">
                        A username is <strong>required</strong>
                    </mat-error>
                </mat-form-field>
            <!-- </form> -->
        </div>

        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>

    </form>
</mat-step>

Как видите, я закомментировал вложенную "форму" для слота электронной почты. В тестировании я пробовал это комментировать, а не комментировать. В любом случае, проверка ошибок не работает правильно.

Вот некоторые из подходящих фрагментов.ts...

import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
export class Pg2ErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}
  ...
export class Pg2Dialog {
  ...

  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);

  infoMatcher = new Pg2ErrorStateMatcher();
  ...
    this.infoFormGroup = this._formBuilder.group({
      emailCtrl: ['', Validators.required],
    });

Answer 1

Я думаю, что я понял это. ErrorStateMatcher требует именованного элемента управления формы. В данном случае это emailFormControl. Это объявлено как следующее...

  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);

Кроме того, степперу требуется именованная группа форм, которая сама по себе объявляет новый элемент управления формой. В данном случае это был emailCtrl. Это было объявлено как следующее...

    this.infoFormGroup = this._formBuilder.group({
      emailCtrl: ['', Validators.required],
    });

Чтобы элемент управления пошаговой формы использовал элемент управления формы ErrorStateMatcher, просто поместите квадратные скобки внутри назначения.group и назначьте emailFormControl для emailCtrl. Как это...

    this.infoFormGroup = this._formBuilder.group({
      emailCtrl: this.emailFormControl
  });

Я проверил это в другом разделе кода с похожей проблемой, и это сработало в обоих местах!