如何在Angular 6中创建支持ngModel的自定义输入组件？

在Angular 6及之后的版本中，实现支持[(ngModel)]双向绑定的自定义输入组件，最规范且简洁的方式是实现ControlValueAccessor接口——这是Angular表单体系与自定义组件交互的标准契约，比旧方案更适配新版本的Angular特性。

核心思路：实现ControlValueAccessor接口 #

这个接口定义了自定义组件与Angular表单控件之间的交互规则，你需要实现四个关键方法：

• writeValue(obj: any)：当外部ngModel的值变化时，Angular会调用这个方法，把新值传递给组件内部
• registerOnChange(fn: any)：注册一个回调函数，当组件内部值变化时，调用它通知外部ngModel更新
• registerOnTouched(fn: any)：注册一个回调函数，当组件被标记为“已触碰”（比如输入框失焦）时调用
• setDisabledState(isDisabled: boolean)：处理组件的禁用状态

同时，你需要在组件的提供者中注册NG_VALUE_ACCESSOR，让Angular识别这个组件是一个表单控件。

完整的自定义Input组件示例 #

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

@Component({
  selector: 'app-input',
  template: `
    <div class="input-wrapper">
      <input 
        type="text" 
        [name]="inputName"
        class="custom-input" 
        [(ngModel)]="internalValue"
        (blur)="onTouched()"
        [disabled]="isDisabled"
      >
      <label [for]="inputName">{{ labelText }}</label>
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements OnInit, ControlValueAccessor {
  // 可通过@Input()让配置支持外部传入，提升组件复用性
  @Input() inputName: string = '';
  @Input() labelText: string = '';

  isDisabled = false;
  private _internalValue: any = '';

  // 存储外部传入的回调函数
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  ngOnInit(): void {}

  // 实现ControlValueAccessor的方法
  writeValue(value: any): void {
    if (value !== this._internalValue) {
      this._internalValue = value;
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }

  // 通过get/set监听内部值变化，自动通知外部更新
  get internalValue(): any {
    return this._internalValue;
  }

  set internalValue(value: any) {
    if (value !== this._internalValue) {
      this._internalValue = value;
      this.onChange(value); // 触发外部ngModel更新
    }
  }
}

如何使用自定义组件 #

在父组件的模板里，你可以像使用普通input一样直接用双向绑定：

<app-input 
  [(ngModel)]="externalValue"
  inputName="email"
  labelText="邮箱地址"
></app-input>

为什么这个方案更优 #

• 这是Angular官方推荐的标准实现，从Angular 2到最新版本都兼容，不会过时
• 无缝支持模板驱动表单和响应式表单，你可以把这个组件用在form标签里，也能配合formControlName使用
• 代码结构清晰，职责明确，完全符合Angular的表单设计理念

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