Angular formControl 在进行验证时未显示 mat-error答案

【问题标题】：Angular formControl not showing mat-error upon making validationAngular formControl 在进行验证时未显示 mat-error
【发布时间】：2020-05-04 16:54:54
【问题描述】：

我正在使用 Angular，我正在制作一个包含 FormArray 的 FormGroup，其中包含一个包含 FormControl 的 FormGroup。单击提交按钮时，我想在执行操作之前验证我的所有字段。

当你点击提交按钮时，所有有错误的文件都会变成红色，但 mat-error 组件会保持隐藏，这是我的问题。我想知道如何更新我的代码，以便 mat-error 按预期响应。

这是我的代码示例：

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>

【问题讨论】：

您不需要使用 *ngIf="validateOneField(...)，mat-error，缺陷仅在控件被触摸且无效时才显示错误 - 您可以更改此行为，请参阅 @ 987654321@。无论如何，你有一个类型错误，我想你想说validateOneField(myItem.get('myFormControl')) - 或validateOneFiled(myItem.controls.myFormControl)，我不确定最后一个 - 但肯定不是opt跨度>
谢谢。我删除了所有 *ngIf 并制作了我的自定义状态匹配器，从而解决了问题。

标签： angular validation

【解决方案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 的输入！

【讨论】：