Angular2 pipe not working for input

Question

I'm using angular2 inbuilt pipe percent in my HTML

<input class="ibox1 rightalign" type="text" [ngModel]="_note.StudentPercent| percent:'.5-5'" ngControl="StudentPercent" pattern="^[0-9]\d*(\.\d+)?$" #StudentPercent="ngForm">

its working & display correct data to input box, but when I change the value of a field pipe doesn't work.

How to resolve this?

Answer 1

You have reapply filter on your model value on change of _note.StudentPercent input. You could use ngModelChange handler for the same.

<input class="ibox1 rightalign" type="text" 
   [ngModel]="_note.StudentPercent| percent:'.5-5'" 
   (ngModelChange)="changeToPercent(_note.StudentPercent,'.5-5')" 
   ngControl="StudentPercent" pattern="^[0-9]\d*(\.\d+)?$"
   #StudentPercent="ngForm" />

Code

changeToPercent(percent, format){
   //make sure PercentPipe in declarations & providers of NgModule
   this._note.StudentPercent = new PercentPipe().transform(percent, format)
}