输入值不会随着ngModel的更新而改变

8 浏览
0 Comments

输入值不会随着ngModel的更新而改变

我尝试修改输入文本以清除所有字母'a'。使用ngModelChange，模型已经改变，但是输入框中的值在我输入另一个有效字母之前不会改变。

我可以使用类似input.value = this.testStr的视图子元素，在更新模型后，但我想知道为什么输入框中的值不遵循模型，是否有更好的处理方法。

根据(ngModelChange) does not update the UI for specific input这个话题，我可以改用(change)事件，但这只有在输入框失去焦点时才起作用。我希望在输入后立即更改输入框的值。我尝试过在更新this.testStr后使用ChangeDetectorRef，但也不起作用。

0

1 答案

0 Comments

问题：输入框的value值在ngModel更新时没有跟着更新。

原因：在ngModel更新时，只更新了testStr的值，但没有更新对应的input的value值。

解决方法：在ngModel更新时，同时更新对应input的value值。

解决方案代码如下：



  
validateInput(e: any, input: any = null) {
  const text = e.replace(/a/g, '');
  this.testStr = text;
  if (input.value != text) {
    const start = input.selectionStart - 1;
    input.value = text;
    input.selectionStart = input.selectionEnd = start;
  }
}

注意：在输入框中间输入时，需要通过selectionStart获取光标位置。

可以在以下链接中查看解决方案的示例：

[https://stackblitz.com/edit/angular-ivy-4zwtm3?file=src%2Fapp%2Fapp.component.ts](https://stackblitz.com/edit/angular-ivy-4zwtm3?file=src%2Fapp%2Fapp.component.ts)

请注意：在回答中不要附加带有代码的图片，最好直接编写代码（编写代码后选择代码并使用Ctrl+K进行格式化），这样更容易回答您的问题。

0