Usando Pipes no ngModel em Elementos INPUT em Angular

Eu tenho um campo HTML INPUT.

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

e eu quero formatar seu valor e usar um canal existente:

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

e receba a mensagem de erro:

Não pode ter um canal em uma expressão de ação

Como posso usar pipes neste contexto?

Você não pode usar operadores de expressão de modelo (canal, salvar navegador) na instrução de modelo:

(ngModelChange)="Template statements"

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

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

Como expressões de modelo, as instruções de modelo usam uma linguagem que se parece com JavaScript. O analisador de instrução de modelo difere do analisador de expressão de modelo e suporta especificamente as atribuições básicas (=) e as expressões de encadeamento (com; ou,).

No entanto, certa sintaxe do JavaScript não é permitida :

• Novo
• operadores de incremento e decremento, ++ e -
• atribuição de operador, como + = e - =
• os operadores bit a bit | e &
• os operadores de expressão do modelo

Então você deve escrever da seguinte maneira:

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

Exemplo de Plunker

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

A solução aqui é dividir a ligação em uma ligação unidirecional e em evento - que a sintaxe [(ngModel)]realmente abrange. []é uma sintaxe de ligação unidirecional e ()é uma sintaxe de ligação de evento. Quando usados ​​juntos - o [()]Angular reconhece isso como abreviação e liga uma ligação bidirecional na forma de uma ligação unidirecional e uma associação de evento a um valor de objeto componente.

A razão pela qual você não pode usar [()]com um tubo é que eles funcionam apenas com ligações unidirecionais. Portanto, você deve dividir o tubo para operar apenas na ligação unidirecional e manipular o evento separadamente.

Consulte Sintaxe de modelo angular para obter mais informações.

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

Gostaria de acrescentar mais um ponto à resposta aceita.

Se o tipo do seu controle de entrada não for texto, o canal não funcionará.

Tenha isso em mente e economize seu tempo.

Eu tentei as soluções acima, mas o valor que vai para o modelo foi o valor formatado, retornando e gerando erros de currencyPipe. Então eu tive que

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

E na função de addToAmount -> alterar no desfoque, porque o ngModelChange estava me dando problemas de cursor.

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

E removendo os outros valores não 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();
  }

Minha solução é fornecida abaixo aqui searchDetail é um 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">

você deve usar [ngModel] em vez da ligação de modelo bidirecional com [(ngModel)]. use o evento de alteração manual com (ngModelChange). essa é uma regra pública para todas as entradas bidirecionais nos componentes.

porque o canal no emissor do evento está errado.

devido à ligação bidirecional, para evitar erros de:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was 
checked.

você pode chamar uma função para alterar o modelo assim:

<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á bom se houver uma solução melhor para evitar esse erro.