javascript – 当`ngModelChange`保持值时,Angular ngModel不会更新

我有一个文本字段表示为：field = {text：“”,valid：false},以及带[[ngModel]] =“field.text”的输入.

我想让那个字段只接受一组定义的字符(对于这个问题,数字),而做(keypress)在移动设备上不起作用,所以我做了：(ngModelChange)=“fieldChanged(field)”

该方法执行以下操作：

fieldChanged(field) {
    console.log(field.text);
    field.text = Array.from(field.text).filter((char:string) => "0123456789".indexOf(char) != -1).join("");
    console.log(field.text);
}

它的行为非常奇怪.

传说：
– 输入：按下了什么键
– 更新前：首先是console.log
– 更新后：第二个console.log
– 输出：我在输入屏幕上看到的内容

| input   | before update | after update | output |
|---------|---------------|--------------|--------|
| ""      | ""            | ""           | ""     | <- starting position, no event
| "a"     | "a"           | ""           | "a"    |
| "a"     | "aa"          | ""           | "aa"   |
| "4"     | "aa4"         | "4"          | "4"    |
| "a"     | "4a"          | "4"          | "4a"   |
| "a"     | "4aa"         | "4"          | "4aa"  |
| "4"     | "4aa4"        | "44"         | "44"   |

为什么在输入合法字符时它总是更新输出？它应该适用于每个事件调用.

编辑：
Plunker

解决方法:

我认为原因是修改ngModelChange上的值会中断更改检测,例如,如果将值更改回先前的值,则会添加无效字符.

解决方法：

constructor(private cdRef:ChangeDetectorRef) {}

fieldChanged(field) {
    console.log(field.text);
    field.text = Array.from(field.text).filter((char:string) => "0123456789".indexOf(char) != -1).join("");
    console.log(field.text);
    var tmp = field.text;
    field.text = null; // or some other value that normally won't ever be in `field.text`
    this.cdRef.detectChanges();
    field.text = tmp;
    this.cdRef.detectChanges(); // I guess this 2nd call won't be necessary
}