Angular中Form.valid验证异常：表单有效时判断不生效求助

我太懂你这种头疼的情况了——明明把所有字段都填对了，结果formName.valid的if分支就是没反应，反而无效的时候提示框弹得很及时。结合我之前踩过的坑，大概率是这几个地方出了问题，你可以逐一排查：

• 检查表单控件的状态更新时机配置
  很多时候我们会给表单设置updateOn属性，如果设成了blur，那只有当输入框失去焦点时，控件的验证状态才会更新。这时候哪怕你填对了内容，只要还没离开输入框，form.valid还是会保持false，自然触发不了if分支。
  看看你的表单构建代码是不是类似这样：

  this.homeForm = this.formBuilder.group({
    // 你的表单字段配置
    name: ['', Validators.required],
    phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]]
  }, { updateOn: 'blur' }); // 就是这个配置在搞鬼
  

  解决办法很简单：要么把updateOn改成change让状态实时更新，要么在判断表单有效性之前，手动强制更新所有控件的状态：

  // 标记所有控件为已触碰，触发验证
  this.homeForm.markAllAsTouched();
  // 强制更新表单的有效性状态
  this.homeForm.updateValueAndValidity();
  

• 确认所有表单字段都正确关联到表单组
  有时候可能是模板里的formControlName拼写错了，或者组件里的表单组漏定义了某个必填字段，导致这个字段的验证状态没被纳入form.valid的计算。比如组件里定义的是username，模板里写成了userName，那这个字段就相当于游离在表单组之外，永远是未验证状态，表单自然永远无效。
  对照组件里的表单组配置，检查模板里的每个输入框：

  <!-- 组件里的控件名是username，这里大小写要完全一致 -->
  <input type="text" formControlName="username" />
  

• 排查自定义验证器的逻辑漏洞
  如果用了自定义验证器，一定要确认在字段有效的时候返回null——很多人会犯这个错，只写了无效时的错误返回，有效时忘了返回null，那表单永远会被判定为无效。比如：

  // 错误的写法：有效时没返回null
  function passwordMatchValidator(control: AbstractControl): ValidationErrors {
    const password = control.get('password')?.value;
    const confirmPassword = control.get('confirmPassword')?.value;
    if (password !== confirmPassword) {
      return { mismatch: true };
    }
    // 这里漏掉了return null！
  }
  
  // 正确的写法
  function passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
    const password = control.get('password')?.value;
    const confirmPassword = control.get('confirmPassword')?.value;
    if (password !== confirmPassword) {
      return { mismatch: true };
    }
    return null; // 有效时必须返回null
  }
  

• 确保验证逻辑在正确的时机触发
  你是在什么时候执行formName.valid判断的？如果是在组件初始化阶段（比如ngOnInit），那时候表单还没接收用户输入，状态肯定是无效的。一定要把判断逻辑放在用户提交表单的事件里，比如按钮点击：

  onSubmitHomeForm() {
    // 先触发所有控件的验证，避免用户没触碰的控件没验证
    this.homeForm.markAllAsTouched();
    if (this.homeForm.valid) {
      alert('Home Form is valid');
    } else {
      alert('Home Form is invalid');
    }
  }
  

你可以按照上面的顺序逐一排查，应该能找到问题所在。

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