Angular中基于ng-container实现动态嵌套响应式子表单的问题

背景与现有问题 #

我找到一篇Angular子表单实现指南，当前父表单组件持有所有子表单，现有代码如下：

父组件代码 #

export class ParentFormComponent implements OnInit {
    valueArray: Array<string> = [
        'value1',
        'value2',
        'value3',
    ];

    @ViewChild(ChildFormComponent, {static: true}) childFormComponent: ChildFormComponent;
    // 更多子表单组件的ViewChildren
   
    parentForm: FormGroup = this.fb.group({});

    constructor(private fb: FormBuilder) {
    }

    ngOnInit(): void {
        this.parentForm= this.fb.group({
            childformgroup: this.childFormComponent.createGroup(this.valueArray),
            // 更多子表单组
        })
    }
}

子组件代码 #

export class ChildFormComponent implements OnInit {
    valueArray: Array<string> = [];
    
    childForm: FormGroup = this.fb.group({});
    
    constructor(private fb: FormBuilder) {
    }

    updateValidation(arrayValueCheckbox: any) {
        // 添加/移除FormControls验证器的代码
    }

    createGroup(valueArray: Array<string>) {
        this.valueArray= valueArray;
        this.addFormControls(valueArray);
        return this.childForm;
    }

    addFormControls(valueArray: Array<string>) {
        this.valueArray.forEach(arrayValue=> {
            this.childForm.addControl(arrayValue + 'Checkbox', new FormControl());
            this.childForm.addControl(arrayValue + 'Calendar', new FormControl({ value: '',
                disabled: true }));
            this.childForm.addControl(arrayValue + 'Textbox', new FormControl({ value: '',
                disabled: true }));
        });
    }

    ngOnInit(): void {
    }
}

父组件HTML原实现 #

<input type="checkbox" ... #checkbox>

<div class="fadein" [hidden]="!checkbox.checked">
    <childform-component></childform-component>
</div>

原实现存在两个问题：

• 未勾选显示子表单的复选框时，子表单验证失效仍会导致父表单验证不通过；
• 子表单始终被渲染，仅通过隐藏控制显示，但取消再勾选复选框时，子表单输入值会保留。

尝试用ng-container解决渲染问题：

<input type="checkbox" ... #checkbox>

<ng-container *ngIf="checkbox.checked">
    <childform-component></childform-component>
</ng-container>

但此时子表单未提前加载，调用childformgroup: this.childFormComponent.createGroup(this.valueArray)会报错。

待解决问题 #

1. 若要使用ng-container，当前实现需做哪些修改？
2. 子表单未加载时如何调用其createGroup()函数？
3. 动态添加/移除父表单中子表单组的最佳方案是什么？要求：①子表单销毁后再加载仍保留输入值；②验证需基于子表单组动态调整。

解决方案 #

针对ng-container的修改与子表单未加载问题 #

原来的实现依赖@ViewChild提前获取子表单组件，但*ngIf会延迟组件初始化，必须调整依赖逻辑：

• 移除父组件中@ViewChild(ChildFormComponent, {static: true})的声明，改为通过子组件的输出事件获取表单实例；
• 子组件添加@Input()接收初始化数据，添加@Output()事件通知父表单已准备就绪；
• 父组件不再在ngOnInit中直接调用子组件的createGroup，而是将初始化数据通过@Input()传给子组件，由子组件内部完成表单创建；
• 当复选框勾选时，子组件初始化并触发formReady事件，父组件在事件回调中把子表单组添加到父表单。

修改后的子组件代码

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

export class ChildFormComponent implements OnInit {
  @Input() valueArray: Array<string> = [];
  @Output() formReady = new EventEmitter<FormGroup>();
  
  childForm: FormGroup = this.fb.group({});
  
  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.addFormControls(this.valueArray);
    this.formReady.emit(this.childForm);
  }

  updateValidation(arrayValueCheckbox: any) {
    // 原验证逻辑保持不变
  }

  addFormControls(valueArray: Array<string>) {
    this.valueArray.forEach(arrayValue => {
      this.childForm.addControl(`${arrayValue}Checkbox`, new FormControl());
      this.childForm.addControl(`${arrayValue}Calendar`, new FormControl({ value: '', disabled: true }));
      this.childForm.addControl(`${arrayValue}Textbox`, new FormControl({ value: '', disabled: true }));
    });
  }
}

修改后的父组件代码

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

export class ParentFormComponent implements OnInit {
  valueArray: Array<string> = ['value1', 'value2', 'value3'];
  parentForm: FormGroup = this.fb.group({});
  showChildForm = false;
  // 缓存子表单的值，用于重新加载时恢复
  childFormCache: any = {};

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.parentForm = this.fb.group({});
  }

  onChildFormReady(childForm: FormGroup) {
    // 恢复缓存的子表单值
    if (this.childFormCache) {
      childForm.patchValue(this.childFormCache);
    }
    // 将子表单组添加到父表单
    this.parentForm.addControl('childformgroup', childForm);
  }

  toggleChildForm() {
    this.showChildForm = !this.showChildForm;
    if (!this.showChildForm) {
      // 隐藏子表单时，保存值到缓存并从父表单移除该组
      const childForm = this.parentForm.get('childformgroup');
      if (childForm) {
        this.childFormCache = childForm.value;
        this.parentForm.removeControl('childformgroup');
      }
    }
  }
}

修改后的父组件HTML

<input type="checkbox" [(ngModel)]="showChildForm" (change)="toggleChildForm()">

<ng-container *ngIf="showChildForm">
  <childform-component [valueArray]="valueArray" (formReady)="onChildFormReady($event)"></childform-component>
</ng-container>

动态添加/移除子表单组的最佳方案 #

要满足保留输入值和动态调整验证的需求，核心思路如下：

1. 缓存子表单值：在子表单被隐藏（销毁）前，将其值保存到父组件的缓存变量中，下次初始化时通过patchValue恢复；
2. 动态管理父表单组：显示子表单时添加子表单组到父表单，隐藏时移除该组，确保父表单的验证仅包含当前存在的子表单；
3. 子表单验证自洽：子表单内部维护自身的验证规则，父表单的验证状态会自动根据当前包含的子表单组更新；
4. 摆脱提前依赖：通过@Input传递数据、@Output传递表单实例，完全避免依赖@ViewChild提前获取子组件。

额外优化建议：

• 若有多个子表单，可使用对象缓存每个子表单的值，比如formCache: { [key: string]: any } = {}，通过子表单的唯一标识区分；
• 子表单可通过ngOnDestroy事件通知父组件保存值，确保缓存时机更准确；
• 若需根据父组件状态动态调整子表单验证，可通过@Input传递状态参数，在子组件中监听参数变化来更新验证规则。

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