Wykorzystanie rur wewnątrz ngModel na elementach wejściowych w kątowych

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

Rozwiązaniem jest podział wiązania na Wiązanie jednokierunkowe i Wiązanie zdarzeń - które w rzeczywistości obejmuje składnia [(ngModel)]. {[2] } jest składnią wiązania jednokierunkowego, a {[3] } jest składnią wiązania zdarzeń. Gdy używane są razem - [()] Angular rozpoznaje to jako skrót i łączy dwukierunkowe powiązanie w postaci jednokierunkowego powiązania i powiązania zdarzeń z wartością obiektu komponentu.

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

Zobacz składnię szablonu Aby uzyskać więcej informacji.

Próbowałem powyższych rozwiązań, ale wartość, która trafia do modelu, była sformatowana, a następnie zwracana i dawała mi błędy currencyPipe. Więc musiałem

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

I na funkcji addToAmount - > zmiana na rozmycie powoduje, że ngModelChange sprawiało mi problemy z kursorem.

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

I usunięcie innych wartości nieliczbowych.

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

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

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

Jeśli typem kontrolki wejściowej nie jest tekst, rura nie będzie działać.

Moje rozwiązanie jest podane poniżej 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">