Как использовать pipe в реактивной форме?

Question

[zlodiak]

Я использую реактивную форму, каждое её значения я вывожу в input. Значения представляют из себя дробные числа, но я хотел бы чтобы pipe выводил их как целые. То есть чтобы пользователь видел не дробное число, а целое, например округлённое.

Важно чтобы при этом они сами по себе оставались дробными(для вычислений, которые будут позже производиться в компоненте)

LIVE DEMO здесь

Я пытался сделать так:

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

Но в ответ мне консоль ругается так:
ERROR Error: Cannot find control with name: 'NaN'

Answer 1

[Дмитрий Лузанов]

formControlName принимает строку в качестве ссылки на поле формы. У вас это name1, name2, name3. Pipe трансформирует значение. Т.е. вы вместо того, чтобы передать formControlName поле, к которому будет привязаны данные инпута, отдаете NaN.
NaN из-за того, что у вас не определены name1, name2, name3 в качестве значений класса компонента, иными словами вы в Pipe передали undefined и получили NaN. А у вашей формы нет поля NaN.

я хотел бы чтобы pipe выводил их как целые. То есть чтобы пользователь видел не дробное число, а целое, например округлённое.
Важно чтобы при этом они сами по себе оставались дробными(для вычислений, которые будут позже производиться в компоненте)

Это вы не с той стороны подошли.

Comments

[zlodiak]

Это вы не с той стороны подошли.

А существует более подходящее решение?..

[Дмитрий Лузанов]

zlodiak, если вам нужно именно в инпуте округлять, то нужно использовать либо маску, либо паттерн, но зачем тогда хранить дробные значения, если они не попадут туда от пользователя?
Если нет, то сделайте отдельный метод для трансформации данных до/после изменения.