在Angular2-View中，在INPUT元素的ngModel中使用pipe道

我有一个HTMLinput字段。

<input [(ngModel)]="item.value" name="inputField" type="text" /> 

我想格式化它的值并使用现有的pipe道：

 .... [(ngModel)]="item.value | useMyPipeToFormatThatValue" ..... 

并得到错误信息：

在动作expression式中不能有pipe道

我如何在这种情况下使用pipe道？

Answer 1

模板语句中不能使用模板expression式运算符 （pipe道，保存导航器）：

 (ngModelChange)="Template statements" 

（ngModelChange）=“item.value | useMyPipeToFormatThatValue = $ event”

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions

所以你应该这样写：

 <input [ngModel]="item.value | useMyPipeToFormatThatValue" (ngModelChange)="item.value=$event" name="inputField" type="text" /> 

Plunker例子

Answer 2

 <input [ngModel]="item.value | useMyPipeToFormatThatValue" (ngModelChange)="item.value=$event" name="inputField" type="text" /> 

这里的解决scheme是将绑定分成单向绑定和事件绑定 – 语法[(ngModel)]实际上包含了这个绑定。 ()是单向绑定语法， ()是事件绑定语法。 当同时使用时 – [()] Angular将其识别为简写，并以单向绑定和绑定到组件对象值的事件的forms连接双向绑定。

你不能在pipe道上使用[()]的原因是pipe道只能使用单向绑定。 因此，必须将pipe道拆分为仅在单向绑定上进行操作并分别处理事件。

有关更多信息，请参阅angular度模板语法 。

Answer 3

我尝试了上面的解决scheme，但模型的价值是格式化的值，然后返回给我currencyPipe错误。 所以我不得不

  [ngModel]="transfer.amount | currency:'USD':true" (blur)="addToAmount($event.target.value)" (keypress)="validateOnlyNumbers($event)" 

而在addToAmount – >模糊变化的function导致ngModelChange给我的光标问题。

 removeCurrencyPipeFormat(formatedNumber){ return formatedNumber.replace(/[$,]/g,"") } 

并删除其他非数字值。

 validateOnlyNumbers(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = String.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(key) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); }