Angular 2表单状态始终无效：ng-select自定义验证异常

嘿，我帮你找到了表单一直处于INVALID状态的问题根源，咱们一步步来梳理和解决：

核心问题：自定义验证器的逻辑缺陷 #

你的checkMinLength验证器有几个关键问题，导致Angular始终判定验证失败：

• 验证通过时未返回null：Angular的验证器规则是，只有返回null才代表验证通过，任何非null的返回值都会被视为验证失败。
• Array.some()的回调逻辑错误：你在回调里返回null，这会被some()解析为false，但即使所有项都符合要求，你的验证器最终返回的是{'checkMinLength': false}——这依然是个非null对象，Angular会判定验证失败。
• 空值处理缺失：当控件值为空或undefined时，验证器没有明确返回null，直接结束函数，Angular会默认判定验证失败。

修正后的验证器代码 #

@Injectable()
export class UtilityService {
  static checkMinLength(min: number, max: number): ValidatorFn {
    return (c: AbstractControl) => {
      // 空值/空数组时直接验证通过
      if (!c.value || c.value.length === 0) {
        return null;
      }

      // 检查是否存在不符合长度要求的项
      const hasInvalidItem = c.value.some((a) => {
        // 直接返回布尔值：不符合长度则返回true，否则false
        return a.itemName.length < min || a.itemName.length > max;
      });

      // 有无效项则返回错误对象，否则返回null（验证通过）
      return hasInvalidItem? { 'checkMinLength': true } : null;
    };
  }
}

额外优化建议 #

1. 移除[(ngModel)]：在响应式表单中，同时使用formControlName和[(ngModel)]容易导致表单状态不一致，建议直接通过this.userInfoForm.get('customerName').value获取控件值，去掉HTML里的[(ngModel)]="customerName"。

2. 完善表单提交逻辑：在saveInfo()方法里先判断表单有效性，避免无效提交：

saveInfo() {
  if (this.userInfoForm.invalid) {
    // 标记所有控件为已触碰，触发错误提示
    this.userInfoForm.markAllAsTouched();
    return;
  }
  // 执行你的提交逻辑
}

3. 补全错误提示文本：把你HTML里截断的错误提示补全，让用户明确知道错误原因：

<span class="help-block" *ngIf="(userInfoForm.get('customerName').touched || userInfoForm.get('customerName').dirty) && userInfoForm.get('customerName').hasError('checkMinLength')">
  每个客户名称的长度必须在 3-50 字符之间
</span>

这样修改后，验证器就能正确返回状态，表单会在所有验证通过时变为VALID，提交按钮也会正常启用啦！

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