angular - pipes - ngmodelchange

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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

Probé las soluciones anteriores, pero el valor que corresponde 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 -> cambiar 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();
  }

Answer 4

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

Answer 5

<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 la sintaxis [(ngModel)] realmente abarca. [] es una sintaxis de enlace unidireccional y () es una sintaxis de enlace de eventos. Cuando se usan juntos: [()] Angular reconoce esto como una abreviatura 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 [()] con 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.