Angular响应式表单长度验证失效始终返回Valid问题求助

存在的核心问题 #

• 输入框类型使用错误：你为银行卡号输入框设置了type="number"，该类型输入框返回的表单值为Number类型，而Angular内置的minLength、maxLength验证器仅对String、Array类型生效，对数字类型会直接返回验证通过，因此长度校验完全失效。同时银行卡号可能存在前导零，使用Number类型存储会丢失前导零，本身也不符合业务需求。
• 错误判断属性名拼写错误：Angular内置minLength验证器返回的错误key为全小写的minlength，你模板中写的card_number.errors?.minLength为驼峰命名，就算校验生效也无法触发错误提示展示。
• 校验规则数值不匹配需求：你在TS中设置的Validators.minLength(6)要求最小长度为6位，和你要求的7位校验规则不符。

解决步骤 #

1. 修改输入框类型：将type="number"改为type="text"，如果需要移动端弹出数字键盘可以替换为type="tel"，两种类型返回的表单值均为字符串，可正常触发长度校验。
2. 修正校验规则：将Validators.minLength(6)改为Validators.minLength(7)，匹配7-16位的长度要求，可额外增加正则校验限制仅能输入数字。
3. 修正模板错误判断属性：将card_number.errors?.minLength改为全小写的card_number.errors?.minlength。

修正后的代码示例 #

card-add-c.component.html 关键代码

<input type="tel" id="card_number" class="form-control" formControlName="card_number" required>
<label *ngIf="card_number.invalid && card_number.touched" class="alert alert-danger">
  <div *ngIf="card_number.errors?.minlength">
    银行卡号长度不能少于7位
  </div>
  <div *ngIf="card_number.errors?.maxlength">
    银行卡号长度不能超过16位
  </div>
  <div *ngIf="card_number.errors?.pattern">
    银行卡号仅允许输入数字
  </div>
</label>

card-add-c.component.ts 表单配置代码

addCardForm = this.formBuilder.group({
  card_number: new FormControl('',  [
    Validators.required,  
    Validators.minLength(7), 
    Validators.maxLength(16),
    Validators.pattern(/^\d+$/) // 新增正则校验，限制仅能输入数字
  ]),
})

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