触摸其他字段时如何显示表单字段的错误？ [复制]

Question

我有两个字段和一个按钮，一个简单的按钮。

1. 如果我单击该按钮但未填写所有字段，则此按钮将被禁用，并且在每个字段中都会显示一条错误消息。

2. 当触摸第一个字段时，如果我按下按钮，将显示错误消息，但仅针对第一个字段，并且要显示第二个字段的错误，我需要触摸该字段，但我需要如果我按下此按钮并且两个字段均未填写以显示错误消息。当我按下按钮并且字段不是两个字段仅在第一个字段时，我得到错误原因是触摸，但在第二个没有时，这就是我想要的。

HTML：

<div *ngIf="data.softwareCategoriesRenderComponent === true ||  data.industry === true">
      <h4>Please write the {{data.itemName}} name in EN *.</h4>
      <mat-form-field>
        <input matInput [formControl]="name" required [(ngModel)]="data.newItemName" maxlength="20"
          (focus)="focusFunction()" (focusout)="focusOutFunction()">
        <mat-error *ngIf="name.invalid">The  English name is required </mat-error>
      </mat-form-field>
      <div class="dialog-margin">
        <span class="mat-body-1">Maximum of 50 characters</span>
      </div>
      <h4>Please write the {{data.itemName}} name in CZ *.</h4>
      <mat-form-field >
        <input matInput [formControl]="nameCZ" required [(ngModel)]="data.newCZItemName" maxlength="20"
          (focus)="focusFunction()" (focusout)="focusOutFunction()">
        <mat-error *ngIf="!show">The  Czech name is required </mat-error>
        <mat-error *ngIf="nameCZ.invalid">The  Czech name is required </mat-error>
      </mat-form-field>
      <div class="dialog-margin">
        <span class="mat-body-1">Maximum of 50 characters</span>
      </div>
    </div>

TS：

name = new FormControl('', [Validators.required]);
  nameCZ = new FormControl('', [Validators.required]);
  focusOutFunction() {
    if (this.data.softwareCategoriesRenderComponent === true) {
      if (this.name.valid && this.nameCZ.valid) {
        this.show = true;
      } else {
        this.show = false;
      }
    }
  }

  focusFunction () {
    this.show = true;
  }

Answer 1

看这个demo你可以通过https://stackblitz.com/edit/angular-simple-template-driven-form轻松理解