Angular8：如何编写一个指令来转换文本输入并将其应用于 ngModel

Question

可能是一个菜鸟问题，但我没有找到答案。

我有一个文本输入元素，我需要用输入值更新 model。 model 上的属性是一个数字。 不幸的是，我不能使用 type="number" 作为输入元素。 主机系统/客户端只有一个虚拟键盘，在这种情况下会显示一个不带“-”的虚拟小键盘，不允许负数。

我会使用像toNumber这样的指令

<input placeholder="allowed values are [-2..2]"
       [(ngModel)]="this.myModel.numberProperty" 
       type="text" 
       toNumber/>

那可能吗？ 怎么做？ 如何获取有关输入更改的通知以及如何访问 ngModel？

Answer 1

而不是使用 [(ngModel)] 指令，请使用这种方式（我在 $event.target.value 上添加了 + 用于数字转换）：

<input placeholder="allowed values are [-2..2]" type="text" 
[value]="this.myModel.numberProperty"
(input)="this.myModel.numberProperty= +$event.target.value"/>

或者您可以在输入更改时调用 function：

<input placeholder="allowed values are [-2..2]" type="text" 
[value]="this.myModel.numberProperty"
(input)="onInputChange($event.target.value)"/>

在您的 class 上：

onInputChange(value){
//do more stuff
this.myModel.numberProperty = +value;
}