Angular子组件验证状态未同步到父组件，如何获取真实状态？

在Angular响应式表单的父子组件结构中，通过ControlValueAccessor同步子组件FormGroup的值到父组件后，子组件验证状态为INVALID时，父组件FormGroup仍显示VALID，需要让父组件获取真实的验证状态。

要实现验证状态同步，子组件需要同时实现ControlValueAccessor和Validator接口，并注册验证器提供者，将内部表单的验证错误暴露给父组件的FormControl。

步骤1：子组件实现ControlValueAccessor和Validator接口 #

修改子组件代码，添加Validator接口的实现，并注册NG_VALIDATORS提供者：

import { Component, forwardRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ControlValueAccessor, NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'name-input',
  templateUrl: './name-input.component.html',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => NameInputComponent),
      multi: true
    }
  ]
})
export class NameInputComponent implements ControlValueAccessor, Validator {
  public formGroup: FormGroup = this.formBuilder.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
  });

  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(private formBuilder: FormBuilder) {
    // 监听内部表单值变化，同步到父组件
    this.formGroup.valueChanges.subscribe(value => {
      this.onChange(value);
    });
  }

  // --- ControlValueAccessor 方法实现 ---
  writeValue(value: any): void {
    if (value) {
      this.formGroup.patchValue(value, { emitEvent: false });
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.formGroup.disable() : this.formGroup.enable();
  }

  // --- Validator 方法实现 ---
  validate(control: AbstractControl): ValidationErrors | null {
    // 将子组件内部表单的验证错误传递给父组件的FormControl
    return this.formGroup.invalid ? { ...this.formGroup.errors, nameGroupInvalid: true } : null;
  }
}

步骤2：核心逻辑说明 #

• 实现Validator接口：通过validate方法返回子组件FormGroup的验证错误，当子组件表单无效时，父组件对应的FormControl会接收这些错误，从而标记为INVALID。
• 注册NG_VALIDATORS提供者：让Angular将子组件作为验证器关联到父组件的FormControl上，确保验证状态能同步更新。
• 值同步保持不变：原有的ControlValueAccessor实现负责同步表单值，确保父组件能获取子组件的表单数据。

效果验证 #

修改后，当子组件的firstName或lastName为空时，子组件FormGroup状态为INVALID，父组件的masterFormGroup会同步变为INVALID，此时可以通过masterFormGroup.invalid获取真实的验证状态。

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