2

I have a question about the pipe: Imagine there is pipe which is applied to the field of the reactive form

[value]="form.get(formControlName).value | pipeName”

It works fine the first time the value is set to the form field. Now, there is a process which is syncing the model with a form value. If the form field gets reset with the same value as before - the pipe won't be invoked.

You may say - just don't set the same value to the form again and will be right. Due to some constrains it is hard not to do that so we need to find a solution around it.

Eg: if the view has value ‘112’ the pipe transforms value to '11 2/4' And when I do this.form.get(formControlName).setValue(‘112’) the pipe transformation is not applied and the value stays as '112'

After this call pipe won't be executed and the field value will remain raw and not transformed by a pipe logic.

Does this make sense?

[Update #1]

After trying to make the pipe impure it actually makes it invoked with the same input param but then result on the pipe transformation is not applied back to the template.

[Update #2]

Edited the explanation of what I am trying to achieve.

Evgeny Fedorenko
  • 374
  • 2
  • 12
  • I think this is expected behavior as one of the most critical benefits of pipes are to cache values and avoid running code unnecessarily https://stackblitz.com/edit/angular-rr8dxt. Is your pipe impure? Are you doing something like filtering and sorting? If it is a pure pipe (as it usually should be) would always return the same value right? You can set the pipe to be `impure: false` and it will run each time it receives input https://stackblitz.com/edit/angular-qb7xyf . – Alexander Staroselsky Dec 11 '19 at 20:50
  • Yeah the pipe is impure but that is besides the point. Consider this example. Field value let's say has a value 'a' and pipe transforms it to a smiley face :). But next time form field value is set to the same 'a' the smiley face is gone - raw value 'a' is presented. This is the issue. – Evgeny Fedorenko Dec 11 '19 at 21:00
  • So you are trying to update the value of the reactive form element using `value` instead of using `setValue()`? Do you have both `value` and `formControlName` (from FormBuilder/FormGroup/FormControl) on the same input element? – Alexander Staroselsky Dec 11 '19 at 21:03
  • yes I have both 'value' and' 'formControlName'. Not sure if this is the right way. – Evgeny Fedorenko Dec 11 '19 at 21:27

3 Answers3

3

this is weird to do because you should be binding the form control to the input, not the form control value to the input value:

<input [formControl]="form.get(formControlName)" >

this will keep your input value in sync with your form control so binding to value should never be something you do when using reactive forms.

if you really want this to work for some reason, do this instead:

[value]="form.get(formControlName).valueChanges | async | pipeName”

treat it as a stream of values and subscribe with async, feed result into your pipe

bryan60
  • 28,215
  • 4
  • 48
  • 65
  • so what would be the right way to apply a pipe to the reactive form field value? – Evgeny Fedorenko Dec 11 '19 at 21:29
  • 1
    set the value with the value you want, or write directives that implement control value accessor to format it – bryan60 Dec 11 '19 at 21:30
  • Please check the edited version of the question. Also the way you suggested to set the pipe in the [value] does not make a difference. – Evgeny Fedorenko Dec 12 '19 at 14:40
  • you need to put more detail about what your actual goal is here / what you're trying to accomplish and why you're setting things up this way – bryan60 Dec 12 '19 at 14:52
0

I think its because you are not updating the form value. Please try the following after making changes to the value.

this.form.get(formControlName).setValue(‘112’)

this.form.updateValueAndValidity();
saidutt
  • 289
  • 1
  • 7
0

You should make the pipe impure as state here https://angular.io/guide/pipes#impure-pipes

Angular executes an impure pipe during every component change detection cycle

Just set the attribute pure to false in your Pipe decorator

Massimiliano Sartoretto
  • 1,321
  • 9
  • 21