How to display only single validation error at a time

Question

I have this code to which displaying errors on my form

<input [ngFormControl]="form1.controls['thing']" type="text" id="thing" #thing="ngForm">
<div *ngIf='thing.dirty && !thing.valid'>
    <div class="err" *ngIf='thing.errors.required'>
        Thing is required.
    </div >
    <div class="err" *ngIf='thing.errors.invalid'>
        Thing is invalid.
    </div >
</div>

But in case of thing has two errors in it the two error show up. Lets say if my input has 5 validators so 5 divs will show up which is not nice. How to display just one error div at a time?

Answer 1

If you have consistent markup for your error message blocks, then you can use css to display only the first message and hide the rest:

css

.message-block .error-message {
  // Hidden by default
  display: none;
}
.message-block .error-message:first-child {
  display: block;
}

markup

<div class="message-block">
  <span class="error-message" *ngIf="myForm.get('email').hasError('required')">
    Email is required (first-child of message block is displayed)
  </span>
  <span class="error-message" *ngIf="myForm.get('email').hasError('email')">
    Invalid email format (error message hidden by default)
  </span>
</div>