自定义表单组件能否用DefaultValueAccessor替代ControlValueAccessor以支持formControlName？

你的思路完全没问题——既然你的自定义组件本质是包裹原生<input>，那完全不用从零实现ControlValueAccessor，利用Angular内置的DefaultValueAccessor就能省去大量重复代码，它已经帮我们封装了原生表单元素的所有标准值访问逻辑（比如读写value、监听input事件、处理disabled状态等）。

下面给你两种简单的实现方式，选适合你的就行：

方式1：委托内部input的DefaultValueAccessor #

这种方式最清晰，直接把自定义组件的表单逻辑委托给内部原生<input>的DefaultValueAccessor，你只需要实现ControlValueAccessor的接口方法，然后把调用转发给它：

import { Component, Self, ViewChild, ElementRef, Injector, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `
    <div class="custom-input-container">
      <label *ngIf="label">{{ label }}</label>
      <input #inputRef type="text" [placeholder]="placeholder" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomInputComponent,
      multi: true
    },
    // 注入DefaultValueAccessor供内部使用
    DefaultValueAccessor
  ]
})
export class CustomInputComponent implements ControlValueAccessor, OnInit {
  @ViewChild('inputRef', { static: true }) inputRef!: ElementRef;
  private defaultValueAccessor!: DefaultValueAccessor;

  // 自定义属性，比如标签、占位符
  label = '';
  placeholder = '';

  constructor(@Self() private injector: Injector) {}

  ngOnInit() {
    // 获取关联到内部input的DefaultValueAccessor实例
    this.defaultValueAccessor = this.injector.get(DefaultValueAccessor);
  }

  // 转发方法给DefaultValueAccessor
  writeValue(value: any): void {
    this.defaultValueAccessor.writeValue(value);
  }

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

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

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

方式2：继承DefaultValueAccessor并替换关联元素 #

如果你想更简洁，可以直接继承DefaultValueAccessor，然后把它关联的元素替换成你组件内部的<input>：

import { Component, Self, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `
    <div class="custom-input-wrapper">
      <label>{{ label }}</label>
      <input #inputEl type="text" [placeholder]="placeholder" />
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomInputComponent,
      multi: true
    }
  ]
})
export class CustomInputComponent extends DefaultValueAccessor implements AfterViewInit {
  @ViewChild('inputEl') inputEl!: ElementRef;

  // 自定义属性
  label = '';
  placeholder = '';

  constructor(@Self() renderer: any) {
    // 先传一个临时元素，后续替换成实际的input
    super(renderer, new ElementRef({}), false);
  }

  ngAfterViewInit() {
    // 把父类的_elementRef替换成内部的input元素，这样所有表单逻辑都会作用到它
    this._elementRef = this.inputEl;
  }
}

为什么这两种方式可行？ #

DefaultValueAccessor本身就是ControlValueAccessor的官方实现，专门针对原生<input>、<textarea>、<select>等表单元素设计。它已经帮我们处理了：

• 监听input/change事件并触发表单值更新
• 写入值到原生控件
• 处理控件的disabled状态
• 标记控件为touched（当blur事件触发时）

这正好匹配你的需求——既然你的组件只用原生，完全没必要自己重复造轮子。

使用的时候，你直接在自定义组件标签上用formControlName就可以了，和原生input的用法完全一致：

<app-custom-input formControlName="username" label="用户名" placeholder="请输入用户名"></app-custom-input>

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