Angular响应式表单minlength仅在长度为0时触发错误问题

这个问题我之前也碰到过，核心原因通常有两个：模板错误提示的逻辑不完整，或者表单控件的校验更新时机没设置对。

1. 检查模板的错误提示逻辑 #

你已经在代码里配置了Validators.minLength(5)，但如果模板里只判断了required错误，那自然只会在输入为空时显示提示。要同时处理两种错误，还要结合控件的touched或dirty状态（避免页面刚加载就显示错误）：

<!-- 假设你的输入框绑定了formControlName="sensitivity" -->
<input type="text" formControlName="sensitivity">
<div *ngIf="sensitivityControl.touched || sensitivityControl.dirty">
  <p *ngIf="sensitivityControl.hasError('required')" class="error">
    此字段不能为空
  </p>
  <p *ngIf="sensitivityControl.hasError('minlength')" class="error">
    最少需要输入5个字符，当前已输入 {{ sensitivityControl.errors.minlength.actualLength }} 个
  </p>
</div>

在组件类里可以提前定义一个getter方便模板使用：

get sensitivityControl() {
  return this.formGroup.get('sensitivity') as FormControl;
}

2. 调整表单控件的校验更新时机 #

默认情况下，Angular表单控件会在**失去焦点（blur）**时才更新校验状态。如果你希望用户输入过程中就实时触发minLength校验，可以在创建控件时指定updateOn: 'change'：

formGroup.sensitivity = this.formBuilder.control(this.reportModel.sensitivity, {
  validators: [Validators.required, Validators.minLength(5)],
  updateOn: 'change' // 改为在输入变化时立即校验
});

这样用户每输入或删除一个字符，控件都会立刻重新校验，对应的错误提示也会实时显示或隐藏。

验证效果 #

按照上面的步骤修改后，当输入1-4个字符时，就会触发minlength错误提示；输入为空时触发required提示；输入5个及以上字符时，错误提示会自动消失。

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