Assign the same value to internal and external Formcontrol using Controlvalueaccessor with Reactiveforms

Question

I have a directive to put the value treated by Decimalpipe in the input value without changing the Formcontrol value, or better yet, I make a change in Formcontrol without assigning it to the input.

The expected result is: Decimalpipe for the input value (as a string) and float as numeric for the Formcontrol value, and this is ok, just not applying the inheritance.

I use a component to provide functions to increment the value according to a parameter, and access that component through a Controlvalueaccessor. However, the value printed by the "internal" and "external" Formcontrol is different.

Stackblitz: https://stackblitz.com/edit/angular-enbqmf

Answer 1

What if you have @Input() formGroup: Formgroup; in your Input component and pass your formGroup into it? I think it solves your problem

before :

<ng-container [formGroup]="localForm">

afterward:

  <app-input-number step="0.01" name="decimal" [formGroup]="testForm"></app-input-number>

input and remove fromGroup:

  <ng-container [formGroup]="formGroup">
    formControlName="{{ name }}"