How to create reactive forms with nested components in angular?

Here we are creating a form with two nested components one for the textbox and the other one for the radio button.

So our parent component will look like as:

We are passing FormGroup objects as input to child components which has been created in the parent component as input to the child components, they will use this FormGroup object in their component to design specific control of the class.

Our child component will look like as

child-textbox-component

    {{control.caption}}

      [attr.maxlength]="control.width" [name]="control.name"

    [value]="control.defaultValue" [formControlName]="control.name"/>

2. child-radio-button-component

    {{control.caption}}

        class="radio-inline" [title]="control.tooltip">

        {{ value }}

Here control is the model class holding data to be displayed for these child components. In this way we can have our form to be generated using nested components, so that we need not have our form (can say large form) in a single component.