Uso de tuberías dentro de ngModel en elementos INPUT en angular

Tengo un campo HTML INPUT.

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

y quiero formatear su valor y usar una tubería existente:

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

y recibe el mensaje de error:

No se puede tener una tubería en una expresión de acción

¿Cómo puedo usar tuberías en este contexto?

No puede usar operadores de expresión de plantilla (tubería, guardar navegador) dentro de la declaración de plantilla:

(ngModelChange)="Template statements"

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

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

Al igual que las expresiones de plantilla, las declaraciones de plantilla usan un lenguaje que se parece a JavaScript. El analizador de sentencias de plantilla difiere del analizador de expresiones de plantilla y admite específicamente tanto la asignación básica (=) como las expresiones de encadenamiento (con; o,).

Sin embargo, cierta sintaxis de JavaScript no está permitida :

• nuevo
• operadores de incremento y decremento, ++ y -
• asignación de operador, como + = y - =
• los operadores bit a bit | y &
• los operadores de expresiones de plantilla

Entonces debes escribirlo de la siguiente manera:

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

Ejemplo de Plunker

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

La solución aquí es dividir el enlace en un enlace unidireccional y un enlace de evento, que en [(ngModel)]realidad abarca la sintaxis . []es una sintaxis de enlace unidireccional y ()es una sintaxis de enlace de eventos. Cuando se usan juntos: [()]Angular reconoce esto como una forma abreviada y conecta un enlace bidireccional en forma de enlace unidireccional y un enlace de evento a un valor de objeto componente.

La razón por la que no puede usar [()]una tubería es que las tuberías funcionan solo con enlaces unidireccionales. Por lo tanto, debe dividir la tubería para operar solo en el enlace unidireccional y manejar el evento por separado.

Consulte Sintaxis de plantilla angular para obtener más información.

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

Me gustaría agregar un punto más a la respuesta aceptada.

Si el tipo de control de entrada no es texto, la tubería no funcionará.

Tenlo en cuenta y ahorra tiempo.

Probé las soluciones anteriores, pero el valor que va al modelo fue el valor formateado y luego regresó y me dio errores de currencyPipe. Entonces tuve que

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

Y en la función de addToAmount -> cambio en desenfoque porque el ngModelChange me estaba dando problemas con el cursor.

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

Y eliminando los otros valores no numéricos.

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

Mi solución se proporciona a continuación aquí searchDetail es un objeto.

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

debe usar [ngModel] en lugar del enlace de modelo bidireccional con [(ngModel)]. luego use el evento de cambio manual con (ngModelChange). Esta es una regla pública para todas las entradas bidireccionales en los componentes.

porque la tubería en el emisor de eventos está mal.

debido a la unión bidireccional, para evitar errores de:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

puede llamar a una función para cambiar el modelo de esta manera:

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

será bueno si hay una mejor solución para evitar este error.