试图通过扩展 NgxMask 创建一个基于 NgxMask 的掩码，但我遇到了问题

问题描述

我正在尝试创建一个从 NgxMask 扩展的名为 appNumber 的指令。

我尝试基于它创建指令的原因是因为我在传递数字时遇到问题，因为我们在分隔符中处理数字的方式不同（我们使用“.”作为千位分隔符和“,”表示小数点分隔符）。

如果我尝试通过“剪切和干燥”的数字，它会变形并且数字不会正确，为了正确，我需要使用数字方法“toLocaleString()”，但我不想在系统中需要在输入中使用数字的任何地方都这样做。

我尝试构建一个从 NgxMask 扩展的指令，但我没有让它正常工作。

这是指令代码：

export class NumberDirective extends MaskDirective implements AfterViewInit {
  private options: Intl.NumberFormatOptions = { maximumFractionDigits: 2,maximumSignificantDigits: 11 };
  private maxDecimal = 11;

  constructor(
    private element: ElementRef,@Inject(LOCALE_ID) public localeId: string,private maskService: MaskService
  ) {
    super(document,maskService,null);
  }

  ngAfterViewInit(): void {
    this._replaceDotForCommaHTML();
  }

  /**
   * Replaces the . for,in the html
   */
  private _replaceDotForCommaHTML(): void {
    const value = this.element.nativeElement.value;
    if (!!value) {
      const num = NumberUtil.formatNumber(Number(value),this.maxDecimal);
      this.element.nativeElement.value = num.toLocaleString(this.localeId,this.options);
    }
  }
}

   <input
      matInput
      appNumber
      mask="separator.2"
      thousandSeparator="."
      [formControl]="controlName"
      separatorLimit="10000000000"
      placeholder="Equivalência"
      autocomplete="off"
  />

当我到达一个包含该代码的页面时，此代码会触发“ExpressionChangedAfterItHasBeenChecked”错误，但我对如何修复它没有太多想法。

我怀疑这是因为当我在输入上使用“mask”属性时，我也在 appNumber 顶部触发了 NgxMask 指令，但我不确定，我也不知道如何修复它。

这是 stackblitz 的链接：https://stackblitz.com/edit/angular-ivy-yz8enr

您会看到，如果将 .toLocaleString() 添加到 formControl 内的数字，它将按预期工作。

预先感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）