Comment appliquer un tuyau pour former une valeur de contrôle tout en corrigeant en angulaire2

Question

J'utilise l'approche des formes réactives de l'angle 2 dans mon application actuelle. J'ai beaucoup de champs de saisie, je corrige le json que j'ai reçu du serveur.

maintenant j'ai eu une exigence comme je dois formater la valeur tout en affichant et envoyer la valeur réelle tout en envoyant. Par exemple: les champs de devise d'entrée doivent être mis en forme dans le type de devise avec des virgules et, lors de l'envoi, il s'agit juste d'un nombre.

Comment puis-je y parvenir.

J'ai besoin à la fois de valeur et de valeur d'affichage pour le contrôle de formulaire. .

<input type="text" data-test="yearlyRevenue" formControlName="yearlyRevenue" [numberformat]="18" > 

    numberformat is my custom directive to format the data 

Answer 1

Dans blog.ngconsultant.io vous avez un exemple. La "clé" est l'utilisation d'un Hotlistener quand un "flou" et un "focus" se sont produits. Si vous avez deux fonctions "transformer" et "analyser" vous pouvez faire

ngOnInit() { 
    this.el.value = this.transform(this.el.value); 
} 

@HostListener("focus", ["$event.target.value"]) 
onFocus(value) { 
    this.el.value = this.parse(value); // opossite of transform 
} 

@HostListener("blur", ["$event.target.value"]) 
    onBlur(value) { 
    this.el.value = this.transform(value); 
}