实现不硬编码formControlName的可复用ControlValueAccessor组件

我需要实现一个可复用的custom-input组件，避免在组件内部硬编码formControlName，仅通过传入参数，让同一组件能适配同一FormGroup中的多个FormControl。

现有代码 #

CustomInputComponent #

/// CustomInputComponent ///
import { Component, forwardRef, Input, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';

@Component({
  standalone: true,
  selector: 'custom-input',
  template: `  
    <input
      class="input"
      type="text"
      [disabled]="disabled"
      (input)="updateValue($event)"
      [value]="value"
    />`,
  styles: [],
  imports: [CommonModule, FormsModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => CustomInputComponent),
    },
    {
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: CustomInputComponent,
    },
  ],
})
export class CustomInputComponent implements ControlValueAccessor {  
  @ViewChild('input', { static: true }) input!: ElementRef<HTMLInputElement>;

  @Input() ctrlConfigData!: any;
  @Input() ctrlName!: string;

  @Input() value = '';
  disabled: boolean = false;

  onChanged: any = () => {};
  onTouched: any = () => {};

  writeValue(value: string): void {  // Update component state
    console.log('writeValue() called with:', value);
    this.value = value;
  }

  registerOnChange(fn: any): void { // Register the callback for value changes
    this.onChanged = fn;
  }

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

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

  updateValue(event: Event): void {
    const newValue = (event.target as HTMLInputElement).value;
    console.log('newValue: ' + newValue);
    this.value = newValue;
    this.onChanged(newValue);
    this.onTouched();
  }
}

ContainerComponent #

/// ContainerComponent ///
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormGroup, FormControl } from '@angular/forms';
import { CustomInputComponent } from '../custom-input/custom-input.component';

@Component({
  standalone: true,
  selector: 'container',
  template: `
      <custom-input 
        formControlName="ctrlA" 
      ></custom-input>
`,
  styles: [],
  imports: [CommonModule, CustomInputComponent],
})
export class ContainerComponent implements OnInit{
  fg: FormGroup = new FormGroup({});
  
  ngOnInit() {
    console.log('ContainerComponent instantiated');
  
    this.fg.addControl('ctrlA', 
    new FormControl({ disabled: false, value: 'ctrlA!!' }));
    this.fg.addControl('ctrlB', 
    new FormControl({ disabled: false, value: 'ctrlB' }));
  }
}

修正方案 #

要实现需求，核心是让Angular自动处理formControlName与组件的绑定，无需在组件内部维护该属性。以下是修正后的实现：

1. 调整CustomInputComponent #

移除不必要的ctrlName输入属性，保持ControlValueAccessor的正确实现即可：

/// CustomInputComponent ///
import { Component, forwardRef, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';

@Component({
  standalone: true,
  selector: 'custom-input',
  template: `  
    <input
      class="input"
      type="text"
      [disabled]="disabled"
      (input)="updateValue($event)"
      [value]="value"
    />`,
  styles: [],
  imports: [CommonModule, FormsModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => CustomInputComponent),
    },
    {
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: CustomInputComponent,
    },
  ],
})
export class CustomInputComponent implements ControlValueAccessor {  
  @ViewChild('input', { static: true }) input!: ElementRef<HTMLInputElement>;

  @Input() ctrlConfigData!: any;

  value = '';
  disabled: boolean = false;

  onChanged: any = () => {};
  onTouched: any = () => {};

  writeValue(value: string): void {  // Update component state
    console.log('writeValue() called with:', value);
    this.value = value;
  }

  registerOnChange(fn: any): void { // Register the callback for value changes
    this.onChanged = fn;
  }

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

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

  updateValue(event: Event): void {
    const newValue = (event.target as HTMLInputElement).value;
    console.log('newValue: ' + newValue);
    this.value = newValue;
    this.onChanged(newValue);
    this.onTouched();
  }
}

2. 调整ContainerComponent #

• 导入ReactiveFormsModule以支持响应式表单指令
• 用[formGroup]包裹自定义输入组件，确保formControlName能正确关联到FormGroup中的控件
• 可多次使用custom-input并传入不同的formControlName

/// ContainerComponent ///
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { CustomInputComponent } from '../custom-input/custom-input.component';

@Component({
  standalone: true,
  selector: 'container',
  template: `
    <form [formGroup]="fg">
      <custom-input formControlName="ctrlA"></custom-input>
      <custom-input formControlName="ctrlB"></custom-input>
    </form>
`,
  styles: [],
  imports: [CommonModule, CustomInputComponent, ReactiveFormsModule],
})
export class ContainerComponent implements OnInit{
  fg: FormGroup = new FormGroup({});
  
  ngOnInit() {
    console.log('ContainerComponent instantiated');
  
    this.fg.addControl('ctrlA', 
    new FormControl({ disabled: false, value: 'ctrlA!!' }));
    this.fg.addControl('ctrlB', 
    new FormControl({ disabled: false, value: 'ctrlB' }));
  }
}

关键说明 #

• formControlName由父组件在使用时指定，Angular会通过ControlValueAccessor自动将组件与对应的FormControl绑定，无需组件内部处理该属性
• 父组件必须导入ReactiveFormsModule才能使用formGroup和formControlName指令
• 所有使用formControlName的组件必须包裹在带有[formGroup]指令的元素内（如<form>标签）

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