当我在 ngModelChange 中操作更新的值时，不会反映 ngModel 更新答案

【问题标题】：ngModel update is not reflected when I manipulate the updated value in ngModelChange当我在 ngModelChange 中操作更新的值时，不会反映 ngModel 更新
【发布时间】：2021-01-26 09:00:58
【问题描述】：

这是我的组件的 TS 和 HTML 文件：

<input type="text" [ngModel]="value" (ngModelChange)="setValue($event)">

value: string;

setValue(value: string) {
   const pattern = /[^0-9]/g;
   this.value = value.replace(pattern, '');
   console.log(this.value);  // <- When value is 123a, it puts 123 correctly
}

此处添加 Stackblitz：

https://stackblitz.com/edit/angular-ng-model-number

它是替换值中的任何非数字字母。但是输入元素没有更新。

所以如果我输入abcd，输入元素应该是空的但它没有改变。

但只要我输入一个数字，例如abcd1，那么输入元素就会正确显示1。

但是，上面的 console.log 显示 this.value 已正确更新。

知道为什么会这样吗？

我尝试使用input 而不是ngModelChange，但它是一样的。

<input type="text" [ngModel]="value" (input)="setValue($event.target.value)">

【问题讨论】：

为什么不直接使用<input type="number">？
因为我不希望用户像000123这样输入

标签： angular angular-ngmodel

【解决方案1】：

[新]

我找到了正确的方法 (repo)。

首先，html 需要对 ngModel 属性进行双向数据绑定。然后监听 input 事件并在那里更改 ngModel 的值。

在向输入插入新值之前，首先检测其中的变化，之后，设置新值。

<input type="text" #input [(ngModel)]="value" (input)="setValue(input.value)" />

constructor(private changeDetector: ChangeDetectorRef) {}

public setValue(value: string) {
  const parsedValue = value || "";
  this.changeDetector.detectChanges();
  this.value = parsedValue.replace(this.pattern, "");
}

[旧响应，使用 ReachtiveForms]

我会说updating the value in those events breaks the change detection。

我已经使用reactive forms 方法重现了您的案例，并且效果很好。

https://stackblitz.com/edit/angular-ng-model-number-ppqajh?file=src/app/app.module.ts

【讨论】：

感谢您的回答。仅ngModel 就不可能吗？我尝试使用 changeDetectorRef 手动触发更改，但效果不佳。为什么它会破坏变更检测？
我真的不知道，我尝试对 ngModel 做同样的事情，但没有成功。
找到了使用 ngModel 的方法，我更新了我的回复。
不错。如果它跳过手动更改检测会发生什么？
如果你不设置 this.changeDetector.detectChanges() 它根本不会修改值。