0

这是我的 html 模板代码：

<input type="text" maxlength="5" 
    [(ngModel)]="groupInfo.discount" (keyup)="validateFloat($event)">

有我的 validateFloat 方法：

validateFloat(event){
   event.target.value = event.target.value.replace(/[^\d.]/g, "");
   console.log(this.groupInfo.discount);
}

那么当输入值时：

12adc

输入元素输出值：

 12

但 groupInfo.discount 值为：

 12a

我不明白为什么 groupInfo.discount 值是12a？

我怎样才能使 groupInfo.discount 值等于输入元素的值？

我的包依赖项：

"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
4

2 回答 2

1

如果您在模板中使用输入 && ngModel 比(keyup)使用(ngModelChange)事件更好

template.html

<input type="text" maxlength="5" 
[(ngModel)]="groupInfo.discount" (ngModelChange)="validateFloat($event)">

我认为它只是trigger issue与event

于 2017-03-13T12:08:34.723 回答
0

看来您的更新没有被 ngModel 正确接收。

尝试像这样异步进行更新：

validateFloat(event){
   setTimeout(() => {
    event.target.value = event.target.value.replace(/[^\d.]/g, "");
    console.log(this.groupInfo.discount);
   }, 50);
}

当您尝试使用 ngModel 时，由于它正在尝试做的事情，ngModel 有一些不直观的行为 - （将组件中的更改反映到 DOM 并反映到组件中的 DOM 更改）。因为 Angular 不允许您在更改检测周期中检查后更改值，所以 ngModel 必须异步工作，这可能会导致意外行为。

于 2017-03-13T13:24:39.937 回答