Angular 表单一次显示一条错误消息

Question

我使用的是 Angular 6，我有一个表单，里面有两个字段名称和显示名称。我在必填、模式、最小长度、最大长度等两个字段上都进行了 3-4 次验证。我想一次只显示一条错误消息。如何实现？

这里是示例代码。

<mat-form-field required>
            <label for="attribute_name">Name</label>
            <input type="text"
                   required
                   matInput
                   [(ngModel)]="attribute.name"
                   name="name"
                   id="attribute_name"
                   #nameInput="ngModel"
                   [ngClass]="{'form-validation--error-border' : (nameInput?.errors && (nameInput?.dirty || nameInput?.touched)) || false}"
                   [minlength]="3"
                   [maxlength]="63"
                   [pattern]="[some pattern]" />
            <ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
                <li *ngIf="nameInput.errors.required">Name is required</li>
                <li *ngIf="nameInput.errors.minlength">Minimum length should be 3.</li>
                <li *ngIf="nameInput.errors.pattern">It should start with letter.</li>
            </ul>
        </mat-form-field>

Answer 1

你可以试试 ngTemplate *ngIf, else

<ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
   <li *ngIf="nameInput.errors.required; else minLengthElem;">Name is required</li>
</ul>
   <ngTemplate #minLengthElem>   
    <li *ngIf="nameInput.errors.minlength; else patternElem;">Minimum length should be 3.</li>
  </ngTemplate>
  <ngTemplate #patternElem>
    <li *ngIf="nameInput.errors.pattern">It should start with letter.</li>
  </ngTemplate>

Answer 2

而不是使用

来检查错误

nameInput.errors.minlength

你应该像这样使用hasError -

nameInput.hasError('min')

Answer 3

试试这样：

模板：

<ul *ngIf="nameInput.errors && (nameInput.dirty || nameInput.touched)" class="form-validation form-validation--error">
  <li [innerHtml]="getErrorMessage(nameInput.errors)"></li>
</ul>

TS：

 getErrorMessage(errors: any) {
    if (errors.required) {
      return "Name is required"
    } else if (errors.minlength) {
      return "Minimum length should be 3"
    } else if (errors.pattern) {
      return "It should start with letter"
    }
  }