如何避免Angular FormControl同时显示多条错误提示？

这个场景我太熟悉啦！要实现同一时间只显示一条错误提示，核心是给不同的错误设置优先级，让高优先级的错误先显示，低优先级的只有在高优先级错误不存在时才出现。针对你的代码，我们可以这样调整：

方法一：使用ngIf-else结构（推荐，逻辑更清晰） #

把长度错误作为高优先级，优先显示；如果没有长度错误，再显示其他错误提示：

<!-- 优先显示长度范围错误 -->
<div *ngIf="(senderPostalcode?.errors?.maxlength || senderPostalcode?.errors?.minlength) && (senderPostalcode.dirty || senderPostalcode.touched); else otherErrors" class="error">
  {{senderPostalcodeLEN_BET}}
</div>

<!-- 其他类型错误提示（仅当无长度错误时显示） -->
<ng-template #otherErrors>
  <div *ngIf="senderPostalcode.errors && (senderPostalcode.dirty || senderPostalcode.touched)" class="error">
    {{senderPostalcodeError}}
  </div>
</ng-template>

方法二：在条件中排除对立错误 #

如果不想用模板引用，也可以直接在每个错误提示的*ngIf里排除另一种错误的存在：

<!-- 其他错误提示：仅当没有长度错误时才显示 -->
<div *ngIf="senderPostalcode.errors && (senderPostalcode.dirty || senderPostalcode.touched) && !senderPostalcode?.errors?.maxlength && !senderPostalcode?.errors?.minlength" class="error">
  {{senderPostalcodeError}}
</div>

<!-- 长度范围错误：仅当存在时显示 -->
<div *ngIf="(senderPostalcode?.errors?.maxlength || senderPostalcode?.errors?.minlength) && (senderPostalcode.dirty || senderPostalcode.touched)" class="error">
  {{senderPostalcodeLEN_BET}}
</div>

关键说明： #

1. 一定要把(senderPostalcode.dirty || senderPostalcode.touched)加到所有错误提示的条件里，避免页面刚加载就显示错误（你的第二个div之前漏了这个条件哦）。
2. 通过优先级判断，确保同一时间只有一个错误提示的条件能满足，自然就不会同时显示两条了。

内容的提问来源于stack exchange，提问作者3gwebtrain