angular2 ngmodel iが

Question

を希望する値をバインドすることはできませんこれは私の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の値をinput要素の値と同じにするにはどうすればよいですか？

私のパッケージの依存関係：

"@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", 

Answer 1

あなたは(keyup)使用(ngModelChange)イベント

template.html

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

よりも優れたテンプレートに入力& & ngModelを使用している場合、私はその唯一のtrigger issueと考えていますevent

Answer 2

あなたのアップデートがngModelによって適切に選択されていないようです。

は非同期的にこのようなあなたのアップデートをやって試してみてください：あなたはので、それをやろうとしているもので、それに空想を取得しようとすると、

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

ngModelは、いくつかの直感的振る舞いを持っています - （DOMへのコンポーネントの変化を反映し、あなたのコンポーネント内のDOMへの変更）。 Angularでは、変更検出サイクル中にチェックした後で値を変更することはできないため、ngModelは非同期で動作する必要があり、予期しない動作につながる可能性があります。