Angular 5表单组验证器不影响form.isValid的问题咨询

我来帮你排查这个组验证器不生效的问题，主要是两个关键错误导致的，咱们一步步修正：

问题根源分析 #

1. 参数传递错误：你在创建表单组时调用comparisonValidator的写法有语法错误（control1和control2之间缺逗号），而且提前传入this.formGroup是无效的——因为此时this.myForm还未赋值，this.formGroup（我猜你指的是this.myForm）还是undefined。
2. 组验证器设计逻辑错误：组验证器的核心函数会自动接收当前的FormGroup作为参数，不需要额外把它作为参数传入，你之前的写法相当于绕开了正确的参数来源。

修正后的代码实现 #

第一步：修复组验证器函数 #

import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export function comparisonValidator(control1: string, control2: string): ValidatorFn {
  return (group: AbstractControl): ValidationErrors | null => {
    // 确保当前验证的是FormGroup类型
    if (!(group instanceof FormGroup)) {
      return null;
    }

    const f1 = group.get(control1);
    const f2 = group.get(control2);

    // 先检查控件存在且有值，避免空值/undefined导致的判断错误
    if (!f1 || !f2 || f1.value === null || f2.value === null) {
      return null;
    }

    // 执行自定义验证逻辑
    if (f1.value >= f2.value) {
      return { 'case': 'From should be less than To' };
    }

    return null;
  };
}

第二步：修复表单组的创建代码 #

// 假设你已经注入了FormBuilder
this.myForm = this.formBuilder.group({
  control1: [null, [Validators.required, Validators.minLength(3)]],
  control2: [null, [Validators.required, Validators.minLength(3)]]
}, { 
  validator: comparisonValidator('control1', 'control2') // 这里只传两个控件名即可
});

验证生效说明 #

现在当两个控件都通过了自身的必填和最小长度验证后，组验证器会自动触发：

• 如果control1的值大于等于control2的值，表单组会被标记为invalid，this.myForm.isValid会返回false
• 验证错误信息会被挂载到表单组的errors属性上，可以通过this.myForm.getError('case')获取

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