Angular 2 creating reactive forms with nested components

Question

My requirement is that I need to create a form with nested components. I am creating components for each form field means for textbox there will be one component, for radio

Answer 1

Additional note to Mhesh's answer, you can build this sames solution without injecting [parentFormGroup] in the HTML. You can do this by following this Stack Overflow post on reusable form groups.

This is really nice.

Example

To take the existing solution, you can do the same thing, except:

Your parent component can be like this, without any additional parameters passed in

Note additionally you can set formgroups like this:

child-textbox-component

  
    {{control.caption}}
  
  

To enable this you want to inject a ControlContainer into your @Component

@Component({
    moduleId: `MODULE_ID_HERE`,
    selector: "child-textbox-component",
    templateUrl: "childTextbox.component.html",
})
export class ChildTextboxComponent {
    constructor(private controlContainer: ControlContainer, OTHER_PARAMETERS) {
    }
}