Как показать сообщение об ошибке для конкретного div после maxLengh или требуемой проверки с проверкой шаблона?

Question

Я понимаю, что Angular может выполнять проверку по шаблону html и выводить ошибки проверки

Однако что, если у меня есть один div поверх html компонента и атрибута errorMessage в классе компонента, и я хочу вывести всю ошибку проверки в этом одном div, как достичь этой цели?

  <div class="errorMessage">...</div>

  <input id="name" type="text" placeholder="name" #name [(ngModel)]="account.name"
         name="name" (click)="clearErrors()" maxlength="40" required>

  <div *ngIf="name.invalid && (name.dirty || name.touched)">

    <div *ngIf="name.errors.required">
      Account name cannot be empty.    <-- like to show this msg on div.errorMessage
    </div>
    <div *ngIf="name.errors.maxlength">
      Account name maximum length exceeded. <-- like to show this msg on div.errorMessage
    </div>
  </div>

Answer 1

Вы можете просто переместить секцию ошибок в нужный контейнер сообщений.

  <div class="errorMessage">
        <ng-container *ngIf="name.invalid && (name.dirty || name.touched)">
            <ng-container *ngIf="name.errors.required">
                Account name cannot be empty. </ng-container>
            <ng-container *ngIf="name.errors.maxlength">
                Account name maximum length exceeded.
            </ng-container>
        </ng-container>
    </div>

    <input id="name" type="text" placeholder="name" #name 
           [(ngModel)]="account.name"
             name="name" (click)="clearErrors()" 
            maxlength="40" required>