Angular 12响应式表单配置校验规则后输入时错误提示不显示

问题根因 #

你当前触发不了minlength校验的核心原因是：IdTecnico对应的输入框是type="number"类型，而Angular内置的Validators.minLength、Validators.maxLength仅对字符串类型的表单值生效，数字类型的值不会触发长度类校验规则。
输入数字1时，表单控件拿到的值是数字1而非字符串"1"，minLength校验会直接忽略数字类型的输入，所以不会出现错误提示。

解决方案（二选一即可） #

方案1：修改输入框类型为text #

如果你的IdTecnico本身不需要做数值运算，仅需校验字符长度，直接把input的type改成text即可：

<input type="text" class="form-control" id="IdTecnico" name="IdTecnico" formControlName="IdTecnico"/>

修改后输入1个字符就能正常触发minlength校验。

方案2：保留number类型，替换校验规则 #

如果需要保留数字输入类型，把minLength、maxLength替换为对应位数的数值范围校验，比如4位数字对应最小值为1000，30位数字对应最大值为10^30 -1：

IdTecnico: new FormControl(this.servicioSettings.IdTecnico, [
  Validators.required, 
  Validators.min(1000), // 4位数字最小值
  Validators.max(Math.pow(10,30)-1) // 30位数字最大值
]),  

同时HTML里的错误提示对应的规则key也要改成min和max：

<div *ngIf="myForm.get('IdTecnico').errors.min">
  El IdTecnico debe ser mínimo de 4 caracteres
</div>
<div *ngIf="myForm.get('IdTecnico').errors.max">
  El IdTecnico debe ser máximo de 30 caracteres
</div>

可选优化 #

你可以用可选链简化HTML里的表单校验判断，避免空值报错：

*ngIf="myForm.get('IdTecnico')?.invalid && (myForm.get('IdTecnico')?.dirty || myForm.get('IdTecnico')?.touched)"

错误判断也可以简化为：

<div *ngIf="myForm.get('IdTecnico')?.hasError('required')">

内容的提问来源于stack exchange，提问作者Jhon Hernández