Angular formControl не показывает ошибку мат при выполнении проверки

Question

Я использую Angular, и я создаю FormGroup, которая содержит FormArray, которая содержит FormGroup, которая содержит FormControl. Когда я нажимаю кнопку «Отправить», я хочу проверить все свои поля перед выполнением действия.

Когда вы нажимаете кнопку «Отправить», все поля с ошибкой станут красными, но компонент mat-error останется скрытым, и это это моя проблема Я хотел бы знать, как я мог бы обновить свой код, чтобы ошибка mat отвечала, как и ожидалось.

Вот пример моего кода:

my.component.ts:

export class myComponent implements OnInit {

  public optionList = [{
    value: 1
    name: option1
  }, {
    value: 2
    name: option2
  }, {
    value: 3
    name: option3
  }];

  public myFormArray: FormArray = new FormArray([]);
  public myFormGroup: FormGroup;

  public ngOnInit(): void {
    this.myFormGroup = new FormGroup({
      myFormArray: this.myFormArray
    });
    this.myFormArray.push(
      new FormGroup({
        myFormControl: new FormControl('', Validators.required)
      })
    );
  }

  public validateAllFields(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach(field => {
      const control = formGroup.get(field);
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
      } else if (control instanceof FormGroup) {
        this.validateAllFields(control);
      }
    });
  }

  public validateOneField(formControl: FormControl): boolean {
    return formControl.invalid && (formControl.dirty || formControl.touched);
  }

}

my.component. html

<div [formGroup]="myFormGroup">
  <div *ngFor="let myItem of myFormArray.controls">
    <ng-container [formGroup]="myItem">
      <mat-form-field>
        <mat-label>Choose</mat-label>
        <mat-select formControlName="myFormControl">
          <mat-option *ngFor="let opt of optionList" [value]="opt.value">{{opt.name}}</mat-option>
        </mat-select>
        <mat-error *ngIf="validateOneField(opt.controls.myFormControl)">
          My Error Message!!!
        </mat-error>
      </mat-form-field>
    </ng-container>
  </div>
</div>
<button (click)="validateAllFields(myFormGroup)">Submit</button>

Answer 1

Я исправил свою проблему, создав собственный сопоставитель состояний ошибок.

custom-error.state-matcher.ts:

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

export class CustomErrorStateMatcher 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));
  }
}

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

my.component.ts:

public matcher = new CustomErrorStateMatcher();

Когда это будет сделано, вы можете удалить все используемые * ngIf = "" для проверки.

Привет @Eliseo для ввода!