Angular自定义货币输入指令改用[(ngModel)]双向绑定后解决首次加载无格式问题

• 目前在使用自定义的货币格式化指令，可自动将输入框内容转为货币格式，对应的npm包可公开查询。
• 该指令原本仅支持将元素数据绑定到输入框的[value]属性，现需要改为[(ngModel)]双向绑定。绑定功能本身可正常运行，但首次加载时货币格式不会显示，只有点击输入框、触发失焦事件后格式才会正常生效；如果绑定[value]，页面加载时即可正常显示货币格式。
• 基于官方Demo准备了复现项目，曾尝试给input元素添加onload事件编写处理函数，既未理清实现逻辑，onload事件也始终没有触发，希望找到方法让[(ngModel)]绑定的输入框在加载完成时就显示格式化后的货币格式。

问题根因 #

• (onload)绑定完全无效：原生<input>属于普通表单控件，不存在资源加载流程，永远不会触发load事件，该绑定属于无效逻辑。
• 格式化失效的核心是组件生命周期时序冲突：原有货币格式化指令的初始化逻辑为，在自身的ngOnInit钩子中直接读取DOM上input的value属性，完成格式化后再将结果塞回DOM。当单独绑定[value]时，值的渲染时序早于自定义指令的初始化逻辑，指令可读到初始值正常完成格式化；换成[(ngModel)]后，ngModel的初始值渲染时序晚于自定义指令的ngOnInit执行时机，等指令初始化完成时，DOM上的value仍为空，读不到绑定的初始值，自然无法完成格式化。只有当用户交互触发blur事件时，DOM上已经存在ngModel渲染好的初始值，blur处理逻辑读到值后才会完成格式化。

解决方法 #

1. 先删除模板中无效的(onload)绑定，修正后的模板代码如下：

<mat-form-field *ngIf="mpPatient.ssissdiawardLetter=='Y'" appearance="standard">
  <mat-label>SSI/SSDI Award Amount</mat-label>
  <input matInput type="text"
         mvndrMatCurrencyFormat [allowNegative]="false" [currencyCode]="'USD'"
         [(ngModel)]="mpPatient.ssissdiawardAmount"
         (blur)="updateUSAmount($event, mpPatient.ssissdiawardAmount)">
</mat-form-field>

2. 从以下3种方案中选择任意一种解决初始化时序冲突：

• 方案1（零侵入简单实现）：把初始绑定值的赋值动作放到组件的ngAfterViewInit钩子里，通过setTimeout将赋值逻辑推到下一个事件循环，等自定义指令的所有初始化逻辑执行完成后，再把值赋值给ngModel，即可触发正常格式化。示例组件代码：

// 组件类内实现
private rawAwardAmount: number | string = null; // 存储接口返回的原始金额值

ngAfterViewInit(): void {
  // 等待所有视图初始化完成后再赋值，规避时序冲突
  setTimeout(() => {
    this.mpPatient.ssissdiawardAmount = this.rawAwardAmount;
  }, 0);
}

• 方案2（一劳永逸）：编写一个极薄的包装指令，注入原有货币格式化指令和NgModel的实例引用，在视图初始化完成后，主动调用一次原有指令的格式化方法处理DOM上的初始值，无需修改原有业务逻辑。
• 方案3：检查当前使用的货币格式化指令的版本，升级到最新版，新版本已适配ngModel的双向绑定时序，原生支持首次加载的格式化效果，不需要额外编写补丁。

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