Angular响应式表单中Validators.minLength校验不生效问题排查

校验失效的本质是校验器和业务场景的类型不匹配：
Angular内置的Validators.minLength是专门为字符串值设计的校验规则，核心逻辑是统计输入值的字符串长度是否达到设定阈值，对数字类型的输入值完全不生效。
你的overs、players字段绑定的是数字类型输入框，控件持有的值是数字类型（比如初始值8），哪怕用户输入小于3的数字，校验器拿到的是数值本身，不会做字符长度计算，自然永远触发不了minlength对应的校验错误。
而你之前用的Validators.required不区分值类型，只要是空、null、undefined就能正常识别，所以required规则能正常运行。

• 替换错用的校验器：针对你“至少选3局、每队至少3个球员”的数值限制需求，把Validators.minLength(3)替换为适配数字校验的Validators.min(3)，这个校验器的逻辑就是判断输入的数字是否大于等于设定的最小值。
• 同步修改模板的错误匹配逻辑：原来模板里判断f.overs.errors.minlength、f.players.errors.minlength的代码，要改成匹配min校验的错误key，否则哪怕校验正常触发，模板也找不到对应的错误标识，不会展示提示文案。
• 顺手修正模板里复制粘贴遗留的必填提示文案，目前两个字段的必填提示都写成了“First Name is required”，和实际字段含义不匹配。

组件类中的表单定义部分：

this.preferenceForm = this.formBuilder.group({
  overs: [8, [Validators.required, Validators.min(3)]],
  players: [8, [Validators.required, Validators.min(3)]],
  lastMan: [true]
});

模板中的错误提示部分：

<!-- overs输入框校验提示 -->
<div *ngIf="submitted && f.overs.errors" class="invalid-feedback">
  <div *ngIf="f.overs.errors.required">Number of overs is required</div>
  <div *ngIf="f.overs.errors.min">Choose at least 3 overs</div>
</div>

<!-- players输入框校验提示 -->
<div *ngIf="submitted && f.players.errors" class="invalid-feedback">
  <div *ngIf="f.players.errors.required">Number of players per team is required</div>
  <div *ngIf="f.players.errors.min">Choose at least 3 players</div>
</div>

额外提示：如果确实有业务场景需要对数字输入做字符长度校验（比如限制固定位数的手机号），需要自定义校验器把数字转成字符串后再计算长度，不要直接用minLength适配数字场景。

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