Angular自定义表单验证器状态异常问题求助

核心问题分析 #

1. 验证器逻辑完全写反
   Angular表单验证器的规则是：返回null代表验证通过，返回{ [key: string]: any }代表验证失败。你的验证器大概率把这个逻辑搞反了——当主组件的isInvalid为false（选项验证通过）时，验证器本该返回null让表单状态变为VALID，但实际却返回了错误对象，导致日志里出现"主组件false，验证器true"的矛盾。

2. 未监听输入属性变更触发重验证
   如果验证器没有在isInvalid值变化时主动触发表单重新验证，会导致验证器一直使用旧值，看起来像是值始终反向。

3. 初始值未对齐
   验证器指令的isInvalid输入属性初始值可能和主组件不一致，比如主组件初始为false，但验证器默认是true，导致初始状态就出现偏差。

具体解决步骤 #

1. 修正验证器核心逻辑

打开你的appFormStatusValidator指令，调整验证逻辑：

import { Directive, Input, OnInit } from '@angular/core';
import { AbstractControl, ValidationErrors, Validator, NgForm } from '@angular/forms';

@Directive({
  selector: '[appFormStatusValidator]'
})
export class FormStatusValidatorDirective implements Validator, OnInit {
  @Input() isInvalid = false;
  private control?: AbstractControl;

  constructor(private form: NgForm) {}

  ngOnInit(): void {
    this.control = this.form.control;
  }

  validate(control: AbstractControl): ValidationErrors | null {
    // 关键：isInvalid为true时返回错误（验证失败），为false时返回null（验证通过）
    return this.isInvalid ? { formStatusInvalid: true } : null;
  }

  // 监听isInvalid变化，触发表单重验证
  @Input() set isInvalid(value: boolean) {
    this._isInvalid = value;
    if (this.control) {
      this.control.updateValueAndValidity({ emitEvent: false });
    }
  }
  private _isInvalid = false;
}

2. 确认子组件事件传递的准确性

检查options组件的验证逻辑，确保事件传递的值正确：

// options组件内的验证方法
checkValidity() {
  // 当存在未勾选任何选项的行时，invalid为true（验证失败）
  const invalid = this.rows.some(row => !row.options.some(opt => opt.checked));
  this.invalid.emit(invalid);
}

3. 对齐初始值

在主组件中给isInvalid设置明确的初始值：

// main-form组件
isInvalid = false;

验证修正效果 #

当所有行都勾选option1时，options组件会发送false给主组件，主组件isInvalid变为false，验证器返回null，表单状态变为VALID，此时日志应显示：
options component: is INvalid: false main form - isInvalid: false validator: is invalid: false

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