我已经在ReactiveForm FormControl上放置了一个货币属性指令,该指令在输入事件(onKeyDown)上使用@HostListener来删除所有无效字符(字母和符号),因为它们被输入到输入中,但允许使用数字和小数.但是,如果在空输入字段中键入无效字符(即a)并且指令将其删除,则不会更新模型.
我使用货币指令添加了plunker设置.要了解我的问题,请遵循以下步骤：
>输入123a你输入中没有a,因为不允许使用字母,并且因为表单无效而按钮被禁用(好)
>输入123.456输入中没有输入6,因为只允许2位小数,并且由于表单无效而按钮被禁用(好)
>键入a你没有在输入中得到a,但是启用了对接,因为模型认为它有一个a,即使UI没有显示它(坏)
您可以通过单击按钮并查看记录this.form.value的控制台来验证模型是否未更新,并显示{amount：’a’}.如果您接下来键入有效字符,则模型将仅包含该字符,并且已删除了该字符.因此,只有在这种情况下,模型才能正确更新.
这是AngularJS中使用ngModel验证器和解析器管道,modelValue,$setViewValue和$render()来轻松解决的问题,用于更新并强制AngularJS运行$digest.你是怎么做Angular的？
@HostListener('input',['$event'])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
// Only numbers and decimals
let trimmed = input.value.replace(/[^\d\.,]+/g,'');
// Only a single decimal and choose the first one found
if (trimmed.split('.').length > 2) {
trimmed = trimmed.replace(/\.([^\.]*)$/,'$1');
}
// Cannot start with decimal typed or pasted
if (trimmed.indexOf('.') === 0) { trimmed = ''; }
// AngularJS "like" solution would be something like:
// ngModelCtrl.$setViewValue(trimmed);
// ngModelCtrl.$render();
// Angular solution is???
input.value = trimmed;
}
