Angular 5：可复用表单组件的双向数据绑定实现问题

咱先把核心逻辑说清楚：要让自定义组件能和父组件的NgModel实现双向绑定，必须实现Angular的ControlValueAccessor接口——它就像组件和表单之间的桥梁，负责数据的双向传递和状态通知。

第一步：编写可复用子表单控件 #

拿一个通用输入控件举例，实现双向绑定的核心代码如下：

custom-input.component.ts #

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

@Component({
  selector: 'custom-input',
  template: `
    <div class="form-group">
      <label>{{ label }}</label>
      <input 
        type="{{ inputType }}" 
        class="form-control"
        [(ngModel)]="innerValue"
        (blur)="onTouched()"
      >
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  @Input() label: string;
  @Input() inputType: string = 'text';
  
  // 内部存储控件值
  private _innerValue: any = '';

  // 变更回调：通知父组件值变化
  private onChange: (value: any) => void = () => {};
  // 触摸回调：标记控件已被触碰（用于表单校验）
  private onTouched: () => void = () => {};

  // 接收父组件传递的初始值
  writeValue(value: any): void {
    if (value !== this._innerValue) {
      this._innerValue = value;
    }
  }

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

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

  // 通过getter/setter监听内部值变化，自动通知父组件
  get innerValue() {
    return this._innerValue;
  }

  set innerValue(value: any) {
    this._innerValue = value;
    this.onChange(value); // 值变化时触发回调，同步给父组件
  }
}

这里划几个重点：

• NG_VALUE_ACCESSOR提供者：告诉Angular这个组件是表单值访问器，能和NgModel配合工作
• ControlValueAccessor的三个核心方法：
  • writeValue()：接收父组件传来的初始值
  • registerOnChange()：注册回调，内部值变化时通知父组件
  • registerOnTouched()：注册触摸回调，处理表单的触碰状态
• 用getter/setter监听内部ngModel的变化，自动触发父组件的更新

第二步：在父组件中使用自定义控件 #

回到你的admin-panel父组件，这样就能实现双向绑定了：

admin-panel.component.ts #

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

@Component({
  selector: 'admin-panel',
  template: `
    <h3>Settings</h3>
    <form #settingsForm="ngForm" (ngSubmit)="onSubmit(settingsForm)">
      <!-- 双向绑定父组件的settings模型 -->
      <custom-input 
        label="Site Name"
        inputType="text"
        [(ngModel)]="settings.siteName"
        name="siteName"
      ></custom-input>

      <custom-input 
        label="Admin Email"
        inputType="email"
        [(ngModel)]="settings.adminEmail"
        name="adminEmail"
      ></custom-input>

      <button type="submit" class="btn btn-primary">Save Settings</button>
    </form>
  `
})
export class AdminPanelComponent implements OnInit {
  // 父组件的表单模型
  settings = {
    siteName: 'My Admin Panel',
    adminEmail: 'admin@example.com'
  };

  ngOnInit() {}

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Saved settings:', this.settings);
      // 这里写你的表单提交逻辑
    }
  }
}

⚠️ 注意：模板驱动表单里的自定义控件必须加name属性，不然NgModel没法正常工作，这是很多人踩过的坑！

第三步：验证双向绑定效果 #

现在你在自定义输入框里输入内容，父组件的settings对象会自动更新；反过来，如果父组件修改settings的值，子组件的输入框也会同步显示最新内容，完美实现双向绑定。

如果需要扩展表单校验功能，可以给子组件添加@Input()接收校验属性，或者实现Validator接口，核心的双向绑定逻辑已经打通啦。

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