Angular中通过子组件向ngForm添加输入，表单无法获取值的问题

你遇到的这个问题，本质是Angular模板驱动表单无法自动识别子组件内部的表单控件。当你把input放在独立子组件里时，子组件的ngModel是绑定在自己的组件上下文里，并没有注册到父组件的NgForm实例中，所以父表单根本不知道这些输入框的存在，自然获取不到值。

要让子组件能被父表单识别，需要让子组件实现ControlValueAccessor接口，并注册为NG_VALUE_ACCESSOR提供者——这是Angular用来实现自定义表单控件的标准方式，能让子组件和父表单双向绑定并同步数据。

步骤1：修改Input子组件的TS代码 #

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {
  @Input() label: string;
  @Input() name: string;
  private innerValue: any = '';

  // ControlValueAccessor接口方法：向子组件写入值
  writeValue(value: any): void {
    this.innerValue = value || '';
  }

  // ControlValueAccessor接口方法：注册值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // ControlValueAccessor接口方法：注册触摸事件回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 自定义内部方法，用于触发值变化和触摸事件
  onChange: any = () => {};
  onTouched: any = () => {};

  // 绑定输入框的input事件，同步值到父表单
  onInputChange(value: any) {
    this.innerValue = value;
    this.onChange(value);
    this.onTouched();
  }
}

步骤2：修改Input子组件的模板 #

把原来的ngModel绑定改成绑定到子组件内部的innerValue，并通过事件触发数据同步：

<label>{{label}}</label>
<div>
  <input 
    [value]="innerValue" 
    [name]="name"
    (input)="onInputChange($event.target.value)"
    (blur)="onTouched()"
  >
</div>

步骤3：父组件代码无需修改（保持原代码即可） #

根表单代码依旧是：

<form #inputForm="ngForm">
  <div *ngFor="let d of data">
    <app-input [name]="d.name" [label]="d.label"></app-input>
  </div>
</form>
<app-form-processor [inputForm]="inputForm"></app-form-processor>

表单处理器的逻辑也保持不变：

@Input() inputForm: NgForm;

generateStatement() {
  console.log(this.inputForm.value); // 现在能正确获取所有输入框的值了！
}

• ControlValueAccessor接口定义了子组件和父表单之间的通信规范，让Angular知道如何从子组件读取值、向子组件写入值，以及监听值的变化。
• NG_VALUE_ACCESSOR提供者把你的子组件注册成一个标准表单控件，这样父组件的NgForm就能把它纳入自己的控件集合中，点击处理按钮时就能获取到所有输入框的值了。

如果直接把输入框嵌入父表单，Angular会自动帮你完成这些注册工作，但用子组件时就需要手动实现这个接口啦。

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