Angular中NumberDirective与TrueFalseValueDirective无法同时生效求助

问题背景 #

项目中实现两个自定义指令：

• NumberDirective：将输入/选择控件的字符串值转换为数字类型，作用于所有带[(ngModel)]的元素
• TrueFalseValueDirective：替代原生ng-true-value/ng-false-value，让指定复选框选中时返回1、未选中返回0

当前问题：两个指令无法同时生效，同一控件仅能运行其中一个。

模板代码 #

<form #f="ngForm">
  <input type="checkbox" [(ngModel)]="data.option" name="options" checked="data.checked" trueFalseValue>

  <select [(ngModel)]="data.selection" name="selection">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>

  <input type="text" name="Text1" [disabled]="data.selection!==1" [(ngModel)]="data.Text1" />
  <input type="text" name="Text2" [disabled]="data.selection!==2" [(ngModel)]="data.Text2" />
  <input type="text" name="Text3" [disabled]="data.selection!==3" [(ngModel)]="data.Text3" />
</form>

冲突原因 #

两个指令均实现了ControlValueAccessor接口，且在构造函数中直接替换ngControl.valueAccessor。当同一元素同时应用两个指令时，后初始化的指令会覆盖前一个的valueAccessor实例，导致仅最后生效的指令起作用。

解决方案 #

1. 重构NumberDirective：改用表单解析器/格式化器机制 #

将指令作用范围缩小至非复选框控件，同时放弃直接替换valueAccessor，改用Angular表单内置的parser（视图转模型）和formatter（模型转视图）机制，这样可以与其他ControlValueAccessor指令共存。

修改后的NumberDirective代码：

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: 'input[type="text"][ngModel], select[ngModel], input[type="number"][ngModel]'
})
export class NumberDirective {
  constructor(private ngControl: NgControl) {
    // 视图值转模型值：字符串转数字
    this.ngControl.valueAccessor?.registerOnChange((value: string) => {
      const parsedValue = value ? parseInt(value, 10) : null;
      this.ngControl.control?.setValue(parsedValue, { emitModelToViewChange: false });
    });

    // 模型值转视图值：数字转字符串
    this.ngControl.control?.valueChanges.subscribe((value: number) => {
      this.ngControl.valueAccessor?.writeValue(value ? String(value) : '');
    });
  }
}

2. 修正TrueFalseValueDirective #

首先修正选择器写法（原选择器'trueFalseValue'错误，需改为属性选择器'[trueFalseValue]'），保留其ControlValueAccessor实现以处理复选框的特殊值映射逻辑。

修改后的TrueFalseValueDirective代码：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';

@Directive({
  selector: '[trueFalseValue]'
})
export class TrueFalseValueDirective implements ControlValueAccessor {
  private propagateChange = (_: any) => {};
  trueValue = 1;
  falseValue = 0;

  constructor(private elementRef: ElementRef, private renderer: Renderer2, public ngControl: NgControl) {
    if (ngControl) {
      ngControl.valueAccessor = this;
    }
  }

  @HostListener('change', ['$event'])
  onHostChange(ev) {
    this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
  }

  writeValue(obj: any): void {
    const isChecked = obj === this.trueValue;
    this.renderer.setProperty(this.elementRef.nativeElement, 'checked', isChecked);
  }

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

  registerOnTouched(fn: any): void {}

  setDisabledState?(isDisabled: boolean): void {
    this.renderer.setProperty(this.elementRef.nativeElement, 'disabled', isDisabled);
  }
}

3. 模板优化 #

修正复选框的checked属性绑定（改用单向绑定[checked]，避免与[(ngModel)]双向绑定冲突）：

<form #f="ngForm">
  <input type="checkbox" [(ngModel)]="data.option" name="options" [checked]="data.checked" trueFalseValue>

  <select [(ngModel)]="data.selection" name="selection">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>

  <input type="text" name="Text1" [disabled]="data.selection!==1" [(ngModel)]="data.Text1" />
  <input type="text" name="Text2" [disabled]="data.selection!==2" [(ngModel)]="data.Text2" />
  <input type="text" name="Text3" [disabled]="data.selection!==3" [(ngModel)]="data.Text3" />
</form>

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