如何解决当我在 ngModelChange 中操作更新的值时,不会反映 ngModel 更新
这是我的组件的 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)">
解决方法
[新]
我找到了正确的方法 (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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。