How can I pass the FormGroup of a parent component to its child component using the current Form API

In the parent component do this:

<div [formGroup]="form">  <div>Your parent controls here</div>  <your-child-component [formGroup]="form"></your-child-component></div>

And then in your child component you can get hold of that reference like so:

export class YourChildComponent implements OnInit {  public form: FormGroup;  // Let Angular inject the control container  constructor(private controlContainer: ControlContainer) { }  ngOnInit() {    // Set our form property to the parent control    // (i.e. FormGroup) that was passed to us, so that our    // view can data bind to it    this.form = <FormGroup>this.controlContainer.control;  }}

You can even ensure either formGroupName or [formGroup] is specified on your component by changing its selector like so:

selector: '[formGroup] epimss-error-messages,[formGroupName] epimss-error-messages'

This answer should be sufficient for your needs, but if you want to know more I've written a blog entry here:

https://mrpmorris.blogspot.co.uk/2017/08/angular-composite-controls-formgroup-formgroupname-reactiveforms.html

this is an example of child component used inside parent formGroup :child component ts:

import { Component, OnInit, Input } from '@angular/core';import { FormGroup, ControlContainer, FormControl } from '@angular/forms';@Component({  selector: 'app-date-picker',  template: `  <mat-form-field [formGroup]="form" style="width:100%;">  <input matInput [matDatepicker]="picker" [placeholder]="placeHolder" [formControl]="control" readonly>  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>  <mat-datepicker #picker></mat-datepicker></mat-form-field><mat-icon (click)="clearDate()">replay</mat-icon>`,  styleUrls: ['./date-picker.component.scss']})export class DatePickerComponent implements OnInit {  public form: FormGroup;  public control : FormControl;  @Input() controlName : string;  @Input() placeHolder : string;  constructor(private controlContainer: ControlContainer) {   }  clearDate(){    this.control.reset();  }  ngOnInit() {    this.form = <FormGroup>this.controlContainer.control;    this.control = <FormControl>this.form.get(this.controlName);    }}

css date picker :

mat-icon{position: absolute;left: 83%;top: 31%;transform: scale(0.9);cursor: pointer;}

and used like this :

 <app-date-picker class="col-md-4" [formGroup]="feuilleForm" controlName="dateCreation" placeHolder="Date de création"></app-date-picker>

Parent Component :

    @Component({      selector: 'app-arent',      templateUrl: `<form [formGroup]="parentFormGroup" #formDir="ngForm">                       <app-child [formGroup]="parentFormGroup"></app-child>                    </form>         `    })        export class ParentComponent implements {             parentFormGroup :formGroup         ngOnChanges() {               console.log(this.parentFormGroup.value['name'])     }  }

Child Component :

    @Component({      selector: 'app-Child',      templateUrl: `<form [formGroup]="childFormGroup" #formDir="ngForm">                        <input id="nameTxt" formControlName="name">                    </form>         `    })        export class ChildComponent implements OnInit {     @Input()  formGroup: FormGroup         childFormGroup :FormGroup        ngOnInit() {      // Build your child from      this.childFormGroup.addControl('name', new FormControl(''))          /* Bind your child form control to parent form group         changes in 'nameTxt' directly reflect to your parent          component formGroup        */               this.formGroup.addControl("name", this.childFormGroup.controls.name);        }  }