Angular递归嵌套响应式表单：如何通过NG_VALUE_ACCESSOR传递验证状态？

基于教程实现了公司所需的Angular递归嵌套响应式表单，计划通过JSON文件传递验证规则。目前子组件的必填验证已生效，但父组件（app.component）的提交按钮仍处于可用状态，需借助NG_VALUE_ACCESSOR和NG_VALIDATORS实现组件间的验证状态通信。

数据结构示例：

{
  "groups": [
    {
      "variable": null,
      "isMandatory": true,
      "isEditable": true,
      "groups": []
    }
  ]
}

解决方案 #

要让父组件感知到子组件的验证状态，需让子组件实现ControlValueAccessor接口以完成值双向同步，并注册NG_VALIDATORS提供器向外暴露验证状态，具体步骤如下：

1. 子组件实现ControlValueAccessor接口 #

在递归子组件（如GroupControlComponent）中实现该接口，确保组件能与父表单同步值：

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-group-control',
  templateUrl: './group-control.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => GroupControlComponent),
      multi: true
    }
  ]
})
export class GroupControlComponent implements ControlValueAccessor {
  @Input() groupData: any;
  form: FormGroup;
  onChange: (value: any) => void = () => {};
  onTouched: () => void = () => {};

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({});
  }

  ngOnInit(): void {
    // 根据JSON的isMandatory配置添加必填验证
    const validators = this.groupData.isMandatory ? [Validators.required] : [];
    this.form.addControl('variable', this.fb.control(this.groupData.variable, validators));
    
    // 监听表单值变化，同步到父组件
    this.form.valueChanges.subscribe(value => {
      this.onChange({
        ...this.groupData,
        variable: value.variable,
        groups: this.form.get('groups')?.value || []
      });
    });
  }

  // 写入值到组件
  writeValue(value: any): void {
    if (value) {
      this.form.patchValue(value);
    }
  }

  // 注册值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 注册触摸回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 设置组件禁用状态
  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.form.disable() : this.form.enable();
  }
}

2. 注册NG_VALIDATORS暴露验证状态 #

在子组件的providers中添加NG_VALIDATORS，让组件的验证状态被父表单感知：

providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => GroupControlComponent),
    multi: true
  },
  {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => GroupControlComponent),
    multi: true
  }
]

同时让组件类实现Validator接口，返回验证结果：

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

// 组件类实现Validator接口
export class GroupControlComponent implements ControlValueAccessor, Validator {
  // ... 已有代码

  // 返回组件的验证错误
  validate(control: AbstractControl): ValidationErrors | null {
    // 检查当前表单有效性，递归检查所有子组
    const isCurrentValid = this.form.valid;
    const childGroups = this.form.get('groups')?.controls || [];
    const areChildrenValid = childGroups.every(child => child.valid);
    
    return (isCurrentValid && areChildrenValid) ? null : { invalidNestedGroup: true };
  }
}

3. 父组件绑定表单控件 #

在父组件表单中，将递归子组件当作表单控件使用，确保父表单能捕获子组件的验证状态：

<!-- app.component.html -->
<form [formGroup]="parentForm" (ngSubmit)="onSubmit()">
  <app-group-control formControlName="rootGroup" [groupData]="groupData"></app-group-control>
  <button type="submit" [disabled]="!parentForm.valid">提交</button>
</form>

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  parentForm: FormGroup;
  groupData = {
    groups: [
      {
        variable: null,
        isMandatory: true,
        isEditable: true,
        groups: []
      }
    ]
  };

  constructor(private fb: FormBuilder) {
    this.parentForm = this.fb.group({
      rootGroup: [this.groupData]
    });
  }

  onSubmit(): void {
    console.log(this.parentForm.value);
  }
}

关键说明 #

• NG_VALUE_ACCESSOR让子组件具备表单控件能力，实现与父表单的值双向同步；
• NG_VALIDATORS让子组件的验证状态向上传递，父表单会根据validate方法的返回结果判断整体有效性；
• 递归场景下，validate方法需递归检查所有子组的验证状态，确保整个嵌套结构的有效性都能被父组件捕获。

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