如何解决试图通过扩展 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 举报,一经查实,本站将立刻删除。