Angular响应式表单自定义指令OnInit及*ngIf显示时未触发问题

在Angular中使用响应式表单时，我创建了两个指令：一个将分转换为美元（除以100），另一个将美元转换为分（乘以100）。手动设置表单控件时功能正常，但存在两个问题：

• 指令在OnInit阶段未触发，初始化时本该显示$12,345.50，实际却显示$12,34550.00
• 被*ngIf隐藏的输入框显示时，指令也未触发
  该问题在Angular v15和v18中均能复现，仅通过按钮手动设置控件值后才会正常显示。

解决方案 #

方法一：优化指令的触发逻辑 #

针对指令未在初始化和动态显示时触发的问题，调整生命周期钩子并增加监听逻辑：

1. 替换生命周期钩子：用ngAfterViewInit替代ngOnInit，确保视图初始化完成后再执行值转换，避免初始值还未同步到视图就执行逻辑。
2. 监听表单控件值变化：注入NgControl订阅valueChanges流，覆盖初始值设置、手动输入、动态显示等所有场景：

constructor(private ngControl: NgControl) {}

ngAfterViewInit(): void {
  // 处理初始值
  this.updateDisplayValue(this.ngControl.value);
  // 监听后续值变化
  this.ngControl.valueChanges?.subscribe(value => {
    this.updateDisplayValue(value);
  });
}

private updateDisplayValue(value: any): void {
  if (value == null) return;
  // 分转美元的转换逻辑，示例：
  const dollarValue = value / 100;
  const formattedValue = `$${dollarValue.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
  // 手动更新控件值，避免触发valueChanges循环
  this.ngControl.control?.setValue(formattedValue, { emitEvent: false });
}

3. 处理*ngIf显示场景：添加@HostListener监听输入框的visibilitychange事件，确保输入框从隐藏变为显示时重新触发转换：

@HostListener('visibilitychange')
onVisibilityChange(): void {
  if (this.elementRef.nativeElement.offsetParent !== null) {
    this.updateDisplayValue(this.ngControl.value);
  }
}

方法二：改用自定义ControlValueAccessor组件 #

如果指令的方式难以覆盖所有场景，推荐封装自定义金额输入组件，通过实现ControlValueAccessor接口完全控制模型与视图的同步：

1. 创建组件并实现ControlValueAccessor，在writeValue中处理模型值（分）到视图值（美元）的转换，在用户输入时处理反向转换：

@Component({
  selector: 'app-currency-input',
  template: `<input type="text" [value]="displayValue" (input)="onInput($event)" (blur)="onBlur()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CurrencyInputComponent,
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  displayValue = '';
  private onChange: (value: number) => void = () => {};
  private onTouched: () => void = () => {};

  writeValue(cents: number): void {
    // 分转美元并格式化
    if (cents != null) {
      const dollars = cents / 100;
      this.displayValue = `$${dollars.toLocaleString('en-US', { minimumFractionDigits: 2 })}`;
    } else {
      this.displayValue = '';
    }
  }

  registerOnChange(fn: (value: number) => void): void {
    this.onChange = fn;
  }

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

  onInput(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value;
    this.displayValue = inputValue;
  }

  onBlur(): void {
    // 美元转分，去除非数字字符
    const numericValue = parseFloat(this.displayValue.replace(/[^0-9.]/g, '')) || 0;
    this.onChange(Math.round(numericValue * 100));
    this.onTouched();
    // 重新格式化显示值
    this.writeValue(Math.round(numericValue * 100));
  }
}

2. 在表单中直接使用该组件：

<app-currency-input formControlName="amount"></app-currency-input>

这种方式无需额外指令，无论是初始化还是*ngIf动态显示，组件的writeValue都会被调用，自动完成值转换，完全覆盖所有场景。

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