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

Question

我正在研究必须显示验证错误的角度形式。为此，我实现了要在视图中显示的错误数组。但是我的 dom 结构的问题是，如果我收到表单元素的多个验证问题，那么所有错误都会显示出来。但我期望的是在解决第一个错误后显示一个错误消息，我必须显示它。如何使用 css 或任何其他方式以角度实现它来显示第一个错误。 如果没有错误，元素将不会被构建。

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

Answer 1

你可以有一个函数 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 ""
  }

你写一些像

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

更新从Netanet Basal 这个惊人的条目中窃取的想法，如果你定义一个像这样的对象，我们可以改进我们的函数 getError

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

}

是的，是一个对象，每个属性都是一个函数

我们的函数 getError 就像

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