输入值不随 ngModel 更新而改变

Question

我尝试修改输入中的文本以清除所有字母“a”。 使用 ngModelChange，model 已更改，但输入中的值只有在我键入另一个有效字母后才会更改。 在更新 model 之后，我可以使用视图子喜欢input.value = this.testStr的东西，但我想知道为什么输入中的值不遵循 model 以及是否有更好的方法来处理它。

按照(ngModelChange) 上的主题不更新特定输入的 UI ，我可以从使用ngModelChange更改为(change)事件，但这仅适用于输入模糊。 我想在键入后立即更改输入值。 我在更新this.testStr后尝试使用ChangeDetectorRef ，但它也不起作用。

Answer 1

您还需要更改输入的“值”

<!--see that pass the input using a template reference variable-->
<input #input [ngModel]="testStr" 
              (ngModelChange)="validateInput($event,input)">

  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。

查看堆栈闪电战

注意2：请不要在答案中附上带有代码的图像，最好是您编写代码（在编写代码后将其输入 select 并使用 Ctrl+K 进行格式化）。 这让回答您的问题变得更容易