Угловая форма отображает одно сообщение об ошибке за раз

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, иначе

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