Angular响应式表单如何在HTML模板中获取max校验阈值并显示错误信息

你取值的路径不符合Angular内置校验器的错误对象结构，所以无法正常拿到限定值：
Angular 内置的 Validators.max 校验器触发错误时，返回的错误对象结构如下：

{
  max: {
    max: number, // 你设置的最大限定值
    actual: number // 用户当前输入的实际值
  }
}

你之前尝试用.max.value取值的路径不符合官方定义的结构，因此无法正常获取数值。

正确实现代码 #

你可以通过formControls.sizeOfBuildingPart.errors?.max.max获取你设置的最大限定值，完整的错误提示代码示例如下：

<!-- 仅在字段被触碰且触发max校验时显示提示 -->
<div *ngIf="formControls.sizeOfBuildingPart.touched && formControls.sizeOfBuildingPart.hasError('max')">
  输入值不能超过 {{ formControls.sizeOfBuildingPart.errors?.max.max }}，当前输入为 {{ formControls.sizeOfBuildingPart.errors?.max.actual }}
</div>

其他常用内置校验器错误结构参考 #

方便你后续处理其他校验提示场景：

• Validators.min：错误结构为{ min: { min: 限定最小值, actual: 当前值 } }
• Validators.pattern：错误结构为{ pattern: { requiredPattern: 校验正则, actualValue: 当前值 } }
• Validators.required：错误结构为{ required: true }

内容的提问来源于stack exchange，提问作者Miomir Dancevic