Question

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

如果我单击该按钮并且两个字段都未填满，则该按钮将被禁用，并且在每个字段中都会显示一条错误消息。
当触摸第一个字段并按下按钮时，将显示错误消息，但仅针对第一个字段，而要显示第二个字段的错误，我需要触摸该字段，但我需要如果我按此按钮，但两个字段都没有填写以显示错误消息。而且，当我按下按钮时，只有第一个字段不是两个字段时，我才得到错误原因是触摸，而第二个否，这就是我想要的。

HTML ：

const arr = [{ id: 1, val: 5 }, { id: 2, val: 51 }];

//ES6
console.log(arr.reduce((p,c) => (c.id == 2 && p.push(c.val), p), []))

//ES5
console.log(arr.reduce(function(p, c) {return (c.id == 2 && p.push(c.val), p)}, []))

TS：

<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>

Answer 1

观看此演示，您可以通过此https://stackblitz.com/edit/angular-simple-template-driven-form

轻松理解

触摸其他字段时如何显示表单字段错误？

1 个答案: