How to use pipe in reactive form?

Question

JavaScript

I use a reactive form, I display each of its values ​​​​in the input. The values ​​are fractional numbers, but I would like pipe to output them as integers. That is, so that the user sees not a fractional number, but an integer, for example, rounded.
It is important that they themselves remain fractional (for calculations that will later be made in the component)
LIVE DEMO here
I tried to do this:

<form [formGroup]="fg">
  <input formControlName="{{name1 | testPipe}}">
  <input formControlName="{{name2 | testPipe}}">
  <input formControlName="{{name3 | testPipe}}">
</form>

But in response to me, the console swears like this:
ERROR Error: Cannot find control with name: 'NaN'

Answer 1

formControlName takes a string as a reference to a form field. Yours is name1, name2, name3. Pipe transforms the value. Those. you instead of passing the formControlName field to which the input data will be bound, give NaN.
NaN due to the fact that you do not have name1, name2, name3 defined as values ​​of the component class, in other words, you passed undefined to Pipe and received NaN. And your form doesn't have a NaN field.

I would like pipe to output them as integers. That is, so that the user sees not a fractional number, but an integer, for example, rounded.
It is important that at the same time they themselves remain fractional (for calculations that will be made later in the component)

You didn't come from the wrong direction.