Używanie potoków w ngModel na elementach INPUT w Angular

Mam pole HTML INPUT.

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

i chcę sformatować jego wartość i użyć istniejącego potoku:

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

i otrzymaj komunikat o błędzie:

W wyrażeniu akcji nie może znajdować się potok

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

Nie możesz używać operatorów wyrażeń szablonowych (potok, nawigator zapisywania) w instrukcji szablonu:

(ngModelChange)="Template statements"

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

https://angular.io/guide/template-syntax#template-statements

Podobnie jak wyrażenia szablonowe, instrukcje szablonowe używają języka, który wygląda jak JavaScript. Parser instrukcji template różni się od parsera wyrażeń szablonu i obsługuje w szczególności zarówno podstawowe przypisanie (=), jak i wyrażenia łańcuchowe (z; lub,).

Jednak niektóre składnie JavaScript są niedozwolone :

• Nowy
• operatory inkrementacji i dekrementacji, ++ i -
• przypisanie operatora, na przykład + = i - =
• operatory bitowe | i &
• operatory wyrażeń szablonu

Więc powinieneś napisać to w następujący sposób:

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

Przykład Plunkera

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

Rozwiązaniem jest tutaj podzielenie powiązania na powiązanie jednokierunkowe i powiązanie zdarzenia - które w [(ngModel)]rzeczywistości obejmuje składnia . []jest składnią powiązań jednokierunkowych i składnią powiązań ()zdarzeń. Gdy używane razem - [()]Angular rozpoznaje to jako skrót i łączy dwukierunkowe powiązanie w postaci powiązania jednokierunkowego i powiązania zdarzenia z wartością obiektu składnika.

Powodem, dla którego nie można używać [()]z potokiem, jest to, że rury działają tylko z wiązaniami jednokierunkowymi. Dlatego należy oddzielić potok, aby działał tylko na jednokierunkowym powiązaniu i oddzielnie obsługiwał zdarzenie.

Aby uzyskać więcej informacji, zobacz Składnia szablonów kątowych .

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

Chciałbym dodać jeszcze jeden punkt do zaakceptowanej odpowiedzi.

Jeśli typ kontrolki wprowadzania danych nie jest tekstem, potok nie będzie działał.

Pamiętaj o tym i oszczędzaj czas.

Wypróbowałem powyższe rozwiązania, ale wartości, które trafiają do modelu, były wartościami sformatowanymi, a następnie zwracały i wyświetlały mi błędy currencyPipe. Więc musiałem

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

A na funkcji addToAmount -> zmiana przy rozmyciu, ponieważ ngModelChange dawał mi problemy z kursorem.

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

I usunięcie innych wartości nienumerycznych.

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

Moje rozwiązanie jest podane poniżej tutaj searchDetail jest obiektem ..

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

musisz użyć [ngModel] zamiast dwukierunkowego wiązania modelu z [(ngModel)]. następnie użyj zdarzenia zmiany ręcznej z (ngModelChange). jest to zasada publiczna dla wszystkich dwukierunkowych danych wejściowych w komponentach.

ponieważ potok na emiterze zdarzeń jest nieprawidłowy.

Ze względu na dwukierunkowe wiązanie, aby zapobiec błędom:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

możesz wywołać funkcję, aby zmienić model w następujący sposób:

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


import { UseMyPipeToFormatThatValuePipe } from './path';

constructor({
    private UseMyPipeToFormatThatValue: UseMyPipeToFormatThatValuePipe,
})

getNewValue(ev: any): any {
    item.value= this.useMyPipeToFormatThatValue.transform(ev);
}

będzie dobrze, jeśli istnieje lepsze rozwiązanie, aby zapobiec temu błędowi.