Search code examples
angularangular-reactive-formsangular-pipe

How to use Pipe in Angular 14 Reactive Forms?

We are using Angular Reactive Forms and pipes to format the data, which was working fine with Angular 9, but after upgrade to 14. Can't we use pipe in Angular Reactive Forms anymore?

The expectation is, If the user enters value like 123.45678, we need to round off and suffix with '%' symbol, like 123.457%

When the user tries to edit again (on focus), need to show the database value like 123.45678 on the blur or tab out, need to convert again like 123.457%

This scenario was working fine with Angular 9 but after upgraded to 14.

I've made sample in stackblitz.

Solution

  • You can make the fake read-only component make not linked with formControl So, remove formControlName param from the second input(read only).

    And the second advice is you can delete setting value from the first input

     [value]="loanFormGroup.get('interest')?.value"

    because it doesn't affect on reactive control

    Demo - https://stackblitz.com/edit/angular-aw9cit-fkxxdu?file=src/app/app.component.html