Angular模板驱动表单如何传递NgForm上下文给自定义子组件实现绑定

你当前的实现无法正常收集子组件的表单值，主要有两个核心问题：

• 组件层面没有遵循Angular模板驱动表单的跨组件控件注册规则：原先的实现把带ngModel的原生input藏在自定义子组件内部，依赖Angular自动向上查找表单容器的机制完成注册，这种方式在动态传入字段名的场景下，很容易因为NgModel初始化时name值未就绪、跨组件依赖注入链路不明确，导致控件没有正确挂载到父级NgForm的控件列表中。这种内部元素隐式注册的方式，和你之前在响应式表单场景下的组件复用能力不对等，无法做到组件级别的双向绑定、校验状态同步等表单能力。
• 模板层面存在变量名不匹配的问题：原代码里form标签的模板变量是#form="ngForm"，但提交方法里引用的是f.value，会导致表单实例获取异常。

要实现和响应式表单场景对等的复用效果，需要把自定义子组件改造为符合Angular表单规范的标准表单控件，也就是实现ControlValueAccessor接口，让组件本身可以直接接入父级表单上下文，用法和原生input完全一致。

改造后的代码实现 #

子组件逻辑（child.component.ts） #

核心是实现ControlValueAccessor要求的三个方法，通过NG_VALUE_ACCESSOR令牌把组件注册为表单可识别的值访问器：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  // 注册为表单可识别的值访问器
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChildComponent),
      multi: true
    }
  ]
})
export class ChildComponent implements ControlValueAccessor {
  // 内部存储的输入值
  innerValue = '';
  // 值变化回调，由表单系统自动注入
  private onChange = (value: string) => {};
  // 触碰状态回调，由表单系统自动注入
  private onTouched = () => {};

  // 保持原有的字段名输入接口
  @Input() name = '';

  // 表单系统向组件同步值时触发
  writeValue(value: string): void {
    this.innerValue = value || '';
  }

  // 注册值变化的回调函数
  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  // 注册控件触碰状态的回调函数
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 内部input值变化时，把值同步给外层表单
  handleInputChange(e: Event) {
    const inputValue = (e.target as HTMLInputElement).value;
    this.innerValue = inputValue;
    this.onChange(inputValue);
  }
}

子组件模板（child.component.html） #

把原来独立的ngModel和内部值做双向绑定，不需要额外处理表单上下文：

<input 
  [ngModel]="innerValue"
  (ngModelChange)="handleInputChange($event)"
  [name]="name"
  (blur)="onTouched()"
/>

父组件模板（parent.component.html） #

直接把自定义组件当原生input用，在组件上绑定ngModel即可自动关联父级表单上下文：

<form #f="ngForm" (ngSubmit)="console.log(JSON.stringify(f.value))">
  <input name="someField" ngModel />
  <!-- 自定义组件直接支持ngModel绑定，和原生input用法完全一致 -->
  <app-child name="myField" ngModel></app-child>
  <button type="submit">Submit</button>
</form>

改造完成后，提交表单时f.value会自动包含myField字段，实现双向绑定正常生效。这种实现方式和你之前响应式表单的复用能力完全对等：

• 不需要手动传入父级FormGroup实例，表单上下文由Angular自动通过依赖注入传递
• 同时支持响应式表单的formControlName绑定、模板驱动表单的ngModel绑定
• 自动同步控件的校验状态、触碰状态、值变化事件

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