Utilisation de tuyaux dans ngModel sur des éléments INPUT dans Angular

Question

J'ai un champ HTML INPUT.

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

et je veux formater sa valeur et utiliser un canal existant:

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

et obtenez le message d'erreur:

Impossible d'avoir un tube dans une expression d'action

Comment puis-je utiliser des pipes dans ce contexte?

Answer 1

Vous ne pouvez pas utiliser l'expression d'un Modèle opérateurs(pipe, enregistrer navigator) dans le modèle de déclaration:

(ngModelChange)="Template statements"

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

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

Comme les expressions de modèle, de modèle d'états usage d'une langue qui ressemble à du JavaScript. Le modèle de déclaration de l'analyseur diffère de la l'expression d'un modèle et l'analyseur prend en charge à la fois de base affectation (=) et en enchaînant les expressions (;,).

Cependant, certains de la syntaxe JavaScript n'est pas autorisé:

• nouveau
• d'incrémentation et de décrémentation opérateurs ++ et --
• l'opérateur d'affectation, tels que += et -=
• les opérateurs au niveau du bit | et &
• le modèle d'expression des opérateurs

Donc, vous devriez l'écrire comme suit:

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

Plunker Exemple

Answer 2

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

La solution ici est de séparer la liaison une liaison et une liaison d'événement - dont la syntaxe [(ngModel)] englobe en fait. [] est un moyen de liaison de la syntaxe et de l' () est cas la syntaxe de liaison. Lorsqu'ils sont utilisés ensemble - [()] Angulaire reconnaît ce raccourci et les fils en place d'une liaison bidirectionnelle sous la forme d'un moyen de liaison et un événement de liaison à un composant de l'objet de valeur.

La raison pour laquelle vous ne pouvez pas utiliser [()] avec un tuyau, c'est que les tuyaux de travailler uniquement avec une des liaisons. Par conséquent, vous devez séparer le tuyau pour fonctionner uniquement sur la voie de liaison et de gérer l'événement séparément.

Voir Angulaire de la Syntaxe du Modèle pour plus d'info.

Answer 3

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

Je voudrais ajouter un point de plus à la réponse acceptée.

Si le type de votre contrôle d'entrée n'est pas textuel, le tube ne fonctionnera pas.

Gardez cela à l'esprit et économisez votre temps.

Answer 4

J'ai essayé les solutions ci-dessus mais la valeur qui va au modèle était la valeur formatée qui revenait et me donnait des erreurs de currencyPipe. Donc je devais

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

Et sur la fonction de addToAmount -> change on blur parce que ngModelChange me donnait des problèmes de curseur.

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

Et en supprimant les autres valeurs non numériques.

 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 5

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

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