如何仅在超出最大长度时显示Angular表单错误？

我明白你现在遇到的问题——表单字段的两个错误提示会同时出现，这确实影响用户体验。咱们一步步来解决这个问题：

问题根源 #

你当前的两个校验方法isFieldValid和isFieldMaxValid没有设置互斥逻辑：当字段触发maxlength错误时，isFieldValid的条件依然可能成立（比如字段未触摸但表单已提交的场景），同时isFieldMaxValid也返回true，导致两个错误div同时显示。另外，isFieldMaxValid目前缺少字段触摸状态或表单提交状态的判断，可能会在用户还没输入内容时就提前显示长度错误，体验不太友好。

解决方案 #

我们需要给两个方法加上互斥逻辑，同时统一错误显示的触发条件（字段被触摸或表单已提交）：

修改后的校验方法 #

isFieldValid(field: string): boolean {
  const control = this.quoteForm.get(field);
  // 核心：当字段存在maxlength错误时，不显示通用错误；同时保留原有触发条件
  return !control.hasError('maxlength') && 
         ((!control.valid && control.touched) || (control.untouched && this.formSubmitAttempt));
}

isFieldMaxValid(field: string): boolean {
  const control = this.quoteForm.get(field);
  // 仅当字段有maxlength错误，且满足触发条件（触摸或表单提交）时显示
  return control.hasError('maxlength') && 
         (control.touched || this.formSubmitAttempt);
}

模板部分无需修改 #

你的模板代码可以保持不变，因为我们已经在校验方法里处理了互斥逻辑：

<div *ngIf="isFieldValid('senderCity')" class="error">{{senderCityError}}</div>
<div *ngIf="isFieldMaxValid('senderCity')" class="error">Max 5 characters allowed.</div>
<label *ngIf="canShowLabel('senderCity')" class="control-label">{{senderCityLabel}}</label>
<input type="text" formControlName="senderCity" class="form-control" placeholder="{{senderCityLabel}}" >

额外说明 #

• 之前你用this.quoteForm.get(field).errors.maxLength报错，是因为当字段valid为true时，errors属性是null，直接访问maxLength会抛出空指针错误。改用hasError('maxlength')是正确的做法（注意Angular校验器的key是小写的maxlength）。
• 现在的逻辑保证了：当maxlength错误触发时，通用错误不会显示；只有当没有maxlength错误但字段仍无效时，才会显示通用错误，且两者都遵循“字段触摸或表单提交后才显示”的规则。

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