Angular响应式表单minlength与maxlength校验错误提示问题

核心问题原因 #

Angular内置校验器返回的错误键为全小写格式（minlength、maxlength），而非你代码中尝试的驼峰式minLength/maxLength，这是导致无法访问对应错误的直接原因。

修复后的模板代码示例 #

基础版本（直接在模板中引用）

<div class="col-sm-8">
  <input
    id="fullName"
    type="text"
    class="form-control"
    formControlName="fullName"
  />
  <!-- 必填项错误提示 -->
  <p *ngIf="employeeForm.get('fullName')?.hasError('required') && employeeForm.get('fullName')?.touched">
    请输入全名
  </p>
  <!-- 最小长度错误提示 -->
  <p *ngIf="employeeForm.get('fullName')?.hasError('minlength') && employeeForm.get('fullName')?.touched">
    全名长度不能少于 {{ employeeForm.get('fullName')?.errors?.minlength?.requiredLength }} 个字符
  </p>
  <!-- 最大长度错误提示 -->
  <p *ngIf="employeeForm.get('fullName')?.hasError('maxlength') && employeeForm.get('fullName')?.touched">
    全名长度不能超过 {{ employeeForm.get('fullName')?.errors?.maxlength?.requiredLength }} 个字符
  </p>
</div>

优化版本（通过组件getter简化模板）

在组件类中添加getter方法，减少模板中的重复代码：

// 组件.ts文件中
get fullNameControl() {
  return this.employeeForm.get('fullName');
}

模板中直接使用getter引用：

<div class="col-sm-8">
  <input
    id="fullName"
    type="text"
    class="form-control"
    formControlName="fullName"
  />
  <p *ngIf="fullNameControl?.hasError('required') && fullNameControl?.touched">
    请输入全名
  </p>
  <p *ngIf="fullNameControl?.hasError('minlength') && fullNameControl?.touched">
    全名长度不能少于 {{ fullNameControl?.errors?.minlength?.requiredLength }} 个字符
  </p>
  <p *ngIf="fullNameControl?.hasError('maxlength') && fullNameControl?.touched">
    全名长度不能超过 {{ fullNameControl?.errors?.maxlength?.requiredLength }} 个字符
  </p>
</div>

关键注意事项 #

• 使用hasError('错误键')方法判断具体错误类型，比直接访问errors对象更直观且不易出错
• 模板中加入touched判断，避免页面初始化时就显示错误提示
• 错误对象中包含requiredLength属性，可以动态获取你配置的长度阈值，无需硬写数字

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