web-dev-qa-db-fra.com

Angular 2: Utilisation de tuyaux avec ngModel

J'utilisais le masque de saisie JQuery dans l'un de mes formulaires avec [(ngModel)], mais pour une raison quelconque, ils ne fonctionneront pas ensemble. L'utilisation de l'un ou de l'autre fonctionne parfaitement, mais la combinaison des deux casse complètement [(ngModel)] et les nouvelles entrées ne sont pas renvoyées au composant. Après avoir lutté avec cela pendant un certain temps, j'ai pensé à utiliser Angular 2 seraient une bonne solution, mais je ne sais pas non plus comment faire fonctionner ces deux-là ensemble.

Voici un code que j'utilise pour tester ma pipe

<input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off">
<p>Amount: {{Amount | number:'1.2-2'}}</p>

Si je tape 12345, la balise <p> Ci-dessous affichera 12 345,00, ce qui est exactement la façon dont je veux le filtrer, mais je ne veux pas que la quantité filtrée soit inférieure à l'entrée, je veux que l'entrée elle-même afficher 12.345,00. Ajouter ce même canal au ngModel comme ceci: [(ngModel)]="Amount | number:'1.2-2'" me donne l'erreur suivante.

Erreur de l'analyseur: ne peut pas avoir de canal dans une expression d'action à la colonne 10 dans [Montant | nombre: '1.2-2' = $ event]

Comment puis-je utiliser des canaux (ou masques de saisie) à l'intérieur d'une entrée avec [(ngModel)]?

9
Brett

[(ngModel)] est un raccourci pour [ngModel] et (ngModelChange). Si vous les séparez, cela devrait fonctionner (cela fonctionne à coup sûr avec le tuyau asynchrone):

[ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)"
27
Meir