Angular 19：如何实现类FormControlName的Property指令？

问题 #

我想实现一个自定义的Property指令，功能和现有FormControlName指令类似，能把传入的Property对象的name属性作为formControlName的值使用。

定义的接口如下：

interface Property {
    name: string;
    // 其他属性
}

期望以下两种写法效果完全等价：

<form [formGroup]="myFormGroup">
    <input type="text" [property]="myProperty" />
</form>

<form [formGroup]="myFormGroup">
    <input type="text" [formControlName]="myProperty.name" />
</form>

我尝试继承FormControlName来实现，但输入框始终为空，我的实现代码如下：

@Directive({
    selector: '[property]',
    providers: [
        {
            provide: NgControl,
            useExisting: forwardRef(() => PropertyDirective),
        }
    ],
})
export class PropertyDirective<TProperty extends Property<SimpleValue, string, string>> extends FormControlName {
    public readonly property = input.required<TProperty>();
    constructor(
        @Optional() @Host() @SkipSelf() parent: ControlContainer,
        @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator | ValidatorFn)[],
        @Optional()
        @Self()
        @Inject(NG_ASYNC_VALIDATORS)
        asyncValidators: (AsyncValidator | AsyncValidatorFn)[],
        @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
    ) {
        super(parent, validators, asyncValidators, valueAccessors, null);
        effect(() => {
            const property = this.property();
            if (!property) {
                return;
            }

            this.name = property.name;

        });
    }
}

请问该如何创建符合要求的指令？

解决方案 #

核心问题分析 #

你遇到的问题根源是：FormControlName的核心关联逻辑（绑定父表单、获取对应控件）在ngOnInit阶段执行，而你在effect中修改name时，初始化流程已经完成，不会自动触发控件的重新绑定。直接修改name属性无法同步表单控件的关联状态。

方法一：修正继承FormControlName的实现 #

通过手动触发FormControlName内部的控件绑定逻辑，确保修改name后能重新关联表单控件：

import { Directive, input, effect, forwardRef, Optional, Host, SkipSelf, Self, Inject, OnInit } from '@angular/core';
import { FormControlName, ControlContainer, NG_VALIDATORS, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';

interface Property {
  name: string;
  // 其他属性
}

@Directive({
  selector: '[property]',
  providers: [
    {
      provide: NgControl,
      useExisting: forwardRef(() => PropertyDirective),
    }
  ],
})
export class PropertyDirective<TProperty extends Property> extends FormControlName implements OnInit {
  public readonly property = input.required<TProperty>();

  constructor(
    @Optional() @Host() @SkipSelf() parent: ControlContainer,
    @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator | ValidatorFn)[],
    @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: (AsyncValidator | AsyncValidatorFn)[],
    @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
  ) {
    super(parent, validators, asyncValidators, valueAccessors, null);
  }

  ngOnInit(): void {
    super.ngOnInit();
    
    effect(() => {
      const property = this.property();
      if (!property || this.name === property.name) return;

      this.name = property.name;
      
      // 重新绑定表单控件
      if (this.parent && this.parent.control) {
        // 清除旧关联
        this.control?.clearValidators();
        this.control?.clearAsyncValidators();
        
        // 获取新控件并重新绑定
        const newControl = this.parent.control.get(this.name);
        if (newControl) {
          this.control = newControl;
          this.setValidators(this.validators);
          this.setAsyncValidators(this.asyncValidators);
          this.control.updateValueAndValidity({ emitEvent: false });
          this.viewModel = this.control.value;
        }
      }
    });
  }
}

方法二：组合实现（推荐） #

继承表单控件指令容易受内部生命周期和私有逻辑限制，更稳妥的方式是独立实现NgControl接口，手动关联表单控件：

import { Directive, input, effect, forwardRef, Optional, Host, SkipSelf, Self, Inject, OnInit } from '@angular/core';
import { ControlContainer, NG_VALIDATORS, NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, NgControl, FormControl } from '@angular/forms';

interface Property {
  name: string;
  // 其他属性
}

@Directive({
  selector: '[property]',
  providers: [
    {
      provide: NgControl,
      useExisting: forwardRef(() => PropertyDirective),
    }
  ],
})
export class PropertyDirective<TProperty extends Property> implements NgControl, OnInit {
  public readonly property = input.required<TProperty>();
  
  // 实现NgControl必要属性
  control: FormControl | null = null;
  name: string | null = null;
  valueAccessor: ControlValueAccessor | null = null;
  validators: (Validator | ValidatorFn)[] = [];
  asyncValidators: (AsyncValidator | AsyncValidatorFn)[] = [];

  constructor(
    @Optional() @Host() @SkipSelf() private parent: ControlContainer,
    @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator | ValidatorFn)[],
    @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: (AsyncValidator | AsyncValidatorFn)[],
    @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
  ) {
    this.validators = validators || [];
    this.asyncValidators = asyncValidators || [];
    this.valueAccessor = valueAccessors?.[0] || null;
  }

  ngOnInit(): void {
    effect(() => {
      const property = this.property();
      if (!property || !this.parent?.control) return;

      this.name = property.name;
      this.control = this.parent.control.get(this.name) as FormControl;
      
      if (!this.control || !this.valueAccessor) return;

      // 绑定验证器和值同步逻辑
      this.control.setValidators(this.validators);
      this.control.setAsyncValidators(this.asyncValidators);
      this.control.updateValueAndValidity({ emitEvent: false });

      // 同步初始值到视图
      this.valueAccessor.writeValue(this.control.value);
      
      // 监听控件值变化，同步到视图
      this.control.valueChanges.subscribe(value => {
        this.valueAccessor?.writeValue(value);
      });
      
      // 监听视图输入，同步到控件
      this.valueAccessor.registerOnChange((value: any) => {
        this.control?.setValue(value, { emitEvent: true });
      });
      
      // 绑定触摸事件
      this.valueAccessor.registerOnTouched(() => {
        this.control?.markAsTouched();
      });
    });
  }

  // 实现NgControl必要方法
  viewToModelUpdate(value: any): void {
    this.valueAccessor?.registerOnChange(value);
  }

  setValidators(validators: (Validator | ValidatorFn)[] | null): void {
    this.validators = validators || [];
    this.control?.setValidators(this.validators);
    this.control?.updateValueAndValidity();
  }

  setAsyncValidators(asyncValidators: (AsyncValidator | AsyncValidatorFn)[] | null): void {
    this.asyncValidators = asyncValidators || [];
    this.control?.setAsyncValidators(this.asyncValidators);
    this.control?.updateValueAndValidity();
  }
}

关键说明 #

1. 继承方式需要手动触发控件重新绑定，因为FormControlName的初始化逻辑只执行一次；
2. 组合方式完全自主控制关联流程，避免了继承带来的内部逻辑依赖，稳定性和灵活性更高；
3. 使用effect监听property输入的变化，确保myProperty对象变更时能及时更新表单关联。

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