Utilisation de Pipes dans ngModel sur les éléments INPUT dans Angular

Vous ne pouvez pas utiliser les opérateurs d’expression de modèle (pipe, save navigator) dans la déclaration de modèle:

 (ngModelChange)="Template statements" 

(ngModelChange) = “item.value | useMyPipeToFormatThatValue = $ event”

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

Comme les expressions de modèle, les instructions de modèle utilisent un langage qui ressemble à JavaScript. L’parsingur d’instruction de modèle diffère de l’parsingur d’expression de modèle et prend spécifiquement en charge les expressions d’affectation de base (=) et de chaînage (avec; ou,).

Cependant, certaines syntaxes JavaScript ne sont pas autorisées :

• Nouveau
• incrémenter et décrémenter les opérateurs, ++ et –
• l’affectation de l’opérateur, telle que + = et – =
• les opérateurs binarys | et &
• les opérateurs d’expression de modèle

Donc, vous devriez l’écrire comme suit:

Exemple Plunker

La solution consiste à scinder la liaison en une liaison unidirectionnelle et une liaison d’événement – que la syntaxe [(ngModel)] englobe réellement. [] est une syntaxe de liaison unidirectionnelle et () est une syntaxe de liaison d’événement. Utilisé conjointement – [()] Angular le reconnaît comme raccourci et connecte une liaison bidirectionnelle sous la forme d’une liaison unidirectionnelle et d’un événement lié à une valeur d’object composant.

La raison pour laquelle vous ne pouvez pas utiliser [()] avec un tube est que les tubes ne fonctionnent qu’avec des liaisons unidirectionnelles. Par conséquent, vous devez séparer le canal pour qu’il fonctionne uniquement sur la liaison unidirectionnelle et gérer l’événement séparément.

Voir la syntaxe du modèle angular pour plus d’informations.

J’ai essayé les solutions ci-dessus, mais la valeur qui va au modèle était la valeur formatée, puis retournant et me donnant des erreurs currencyPipe. Donc je devais

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

Et sur la fonction addToAmount -> changer sur le flou, le ngModelChange me donnait des problèmes de curseur.

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

Et supprimer les autres valeurs non numériques.

 validateOnlyNumbers(evt) { var theEvent = evt || window.event; var key = theEvent.keyCode || theEvent.which; key = Ssortingng.fromCharCode( key ); var regex = /[0-9]|\./; if( !regex.test(key) ) { theEvent.returnValue = false; if(theEvent.preventDefault) theEvent.preventDefault(); } 

Ma solution est donnée ci-dessous ici searchDetail est un object ..

J’aimerais append un autre point à la réponse acceptée.

Si le type de votre contrôle d’entrée n’est pas du texte, le tube ne fonctionnera pas.

Gardez-le à l’esprit et économisez votre temps.