Add pipe to formControlName in Angular2

Question

I want to add a numeric channel to an input field in Angular2. I use model forms, and all my inputs are named formControlName instead of using data binding. The problem is, I have formControlName="number | number : '1.2-2'" invalid code.It throws an error saying that formControlName could not be found. I do not want to remove formControlName instead of ngModel, because I subscribe to the form input to do validation as the form is used.

Answer 1

UPDATE: I realized that a simpler and more reasonable approach uses valueChanges to execute setValue with channel conversion in the value of the change event.

There are probably some recommendations on how to clear a subscription and make good use of it if you have many controls for the subscription form. You can also clean up any unwanted pipe transformations when processing / sending final form values.

Main example (See also: source ):

 ngOnInit() { this.searchField = new FormControl(); this.searchField.valueChanges .subscribe(val => { this.searchField.setValue(myPipe.transform(val)) }); } 

Debounce delay + sharpness check:

 this.searchField.valueChanges .debounceTime(400) .distinctUntilChanged() .subscribe(term => { this.searchField.setValue(myPipe.transform(val)) }); 

The original approach ...

This answer describes how to create a custom value control for an input field that inserts custom timestamp conversion functions inside onChange (which receives the convertTo * custom function), and writeValue (which receives the convertFrom custom functions).

You will probably create something similar (for example, adapt a template, etc. to other types of form input), but replace the conversion functions with the necessary pipe conversion methods (maybe two different types) to achieve what you need. Angular documentation or source code may be useful for further details.

Another suggested approach, which I saw, used the use of the channel during the creation of the form control, but this does not seem very useful, because it will not continue to apply these changes when the user changes the input value. At first it was displayed correctly, but any manipulation would lose the filtering of the transformation, and the form would simply be presented as it is without the applied pipe transformation.