使用 angular 中的 css 显示 dom 中的第一个元素并隐藏其他所有元素

Question

I am working on the angular forms where i have to display the validation errors. To do this i have implemented the array of error to display in the view. but the issue with my dom structure is if i get multiple validation issue for the form element then all errors are getting displayed. But what i am expecting is to display one error message after resolving the first error i have to display it other. How to show the first error using css or any other way to implement it in angular. element will not get build if it doesn't have error.

<div>
<error></error>
</div>
<div>
//error element will not build if it does't have error
</div>
<div>
<error></error>
</div>

Answer 1

You can has a function getError

  getError(control:any):string
  {
    if (control.errors)
    {
      if (control.errors.minlength)
          return "Min lengh "+control.errors.minlength.requiredLength
      if (control.errors.email)
          return "invalid email"
      ....
    }
    return ""
  }

And you write some like

 <mat-error>
      {{getError(form.get('email')}}
 </mat-error>

Update idea stolen from this amazing entry of Netanet Basal , we can improve our function getError if you define a object like

export const defaultErrors = {
  required: (error)=>"This field is required",
  minlength: ({requiredLength,actualLength})=>"Expect "+requiredLength+" but got "+actualLength,
    email:(error)=>"invalid email",

}

Yes, is an object, each property is a function

Our function getError is like

  getError(control)
  {
    const firstKey = Object.keys(control.errors)[0];
    return defaultErrors[firstKey]?defaultErrors[firstKey](control.errors[firstKey]):
                                   "unknowed error"
  }