Używanie potoków w trybie ngModel na elementach INPUT w Angular2-View

Question

Mam pole HTML INPUT.

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

i chcę sformatować swoją wartość i użyć istniejącej rurze:

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

i pojawia się komunikat o błędzie:

nie może mieć rurę w wyrażeniu działania

Jak mogę używać rur w tym kontekście?

Answer 1

Nie można używać Template expression operators (rury, zapisz nawigator) w terminie oświadczenia szablonu:

(ngModelChange)="Template statements" 

(ngModelChange) = "item.value | useMyPipeToFormatThatValue = $ event"

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

Powinieneś napisać to w następujący sposób:

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

Plunker Example

Answer 2

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

Rozwiązaniem tego problemu jest podział wiązania w jedną stronę wiązania i wiązania imprezy - co składnia [(ngModel)] faktycznie obejmuje. [] to składnia wiążąca w jedną stronę, a () to składnia wiążąca zdarzenia. Używane razem - [()] Angular rozpoznaje to jako skrót i umieszcza wiązanie dwukierunkowe w postaci jednokierunkowego wiązania i zdarzenia wiążącego się z wartością obiektu składowego.

Powodem, dla którego nie można użyć rury [()], jest to, że rury działają tylko z wiązaniami jednokierunkowymi. Dlatego musisz rozdzielić rurę, aby działała tylko w jednokierunkowym wiązaniu i obsługiwać zdarzenie osobno.

Aby uzyskać więcej informacji, zobacz artykuł Angular Template Syntax.

Answer 3

Próbowałem rozwiązania powyżej, ale wartość, która idzie do modelu były sformatowanej wartości, a następnie wracając i dając mi błędy currencyPipe. Musiałem więc

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

I na funkcję addToAmount -> zmiana na rozmycie spowodować ngModelChange dawał mi kursor problemów.

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

Usuwanie pozostałych wartości liczbowych.

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(); 
    } 

Answer 4

moje rozwiązanie jest podana poniżej tutaj searchDetail jest obiekt ..

<p-calendar [ngModel]="searchDetail.queryDate | date:'MM/dd/yyyy'" (ngModelChange)="searchDetail.queryDate=$event" [showIcon]="true" required name="queryDate" placeholder="Enter the Query Date"></p-calendar> 

<input id="float-input" type="text" size="30" pInputText [ngModel]="searchDetail.systems | json" (ngModelChange)="searchDetail.systems=$event" required='true' name="systems" 
      placeholder="Enter the Systems">