Angular表单如何识别封装子组件中的表单控件名称？

不用实现ControlValueAccessor的话，有两种更轻量的方案：

方案一：利用ControlContainer复用父表单容器 #

这是最简便的方式，只需在子组件的元数据中配置viewProviders，让子组件复用父组件的NgForm容器，子组件内的表单控件会自动注册到父表单中。

子组件代码示例：

import { Component } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  // 关键配置：复用父组件的NgForm作为控件容器
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
})
export class ChildComponent {}

子组件的HTML不需要额外修改，保持原来的表单控件即可：

<div>
  <input name="inputName" ngModel>
</div>

配置完成后，父组件的ngForm就能直接识别子组件里的inputName控件，和父组件内的控件一样正常参与表单验证、值收集等操作。

方案二：手动将子组件控件注册到父表单 #

如果需要更灵活的控制，可以手动获取子组件内的表单控件实例，然后注册到父表单中。

1. 子组件中给表单控件添加模板引用变量，并暴露该控件实例：

<div>
  <input #childInput name="inputName" ngModel>
</div>

import { Component, ViewChild } from '@angular/core';
import { NgModel } from '@angular/forms';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @ViewChild('childInput', { static: false }) childInput: NgModel;
}

2. 父组件中获取子组件实例，在视图初始化后将控件注册到父表单：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ChildComponent } from './child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('form', { static: false }) form: NgForm;
  @ViewChild(ChildComponent, { static: false }) childComp: ChildComponent;

  ngAfterViewInit() {
    // 将子组件的控件添加到父表单
    if (this.childComp?.childInput) {
      this.form.addControl(this.childComp.childInput);
    }
  }
}

这两种方案都不需要大规模修改现有代码，相比实现ControlValueAccessor更轻量化。

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