title: Angular2. How to use sub-form component
body: <p>I want define MySubFormComponent for using many time in others component (like partial form elements) And I try do this but have problem with access to the "formControlGroup" object(subForm) in main component from child component.</p>
  
  <p>I thing this is problem with transmit my parent "formControlGroup" object to child component using annotation <strong>@Input()</strong> this happend after create object of child component (in View Lavel?) and overwrite my define (subForm) ControlGroup in child component.</p>
  
  <p>My question is how can I get access to the inputed "formControlGroup" object to mySubFormComponent in MainFormComponent (Maybe emmit this object in child component but for which event over the subForm, need to work validations) What I am doing wrong?</p>
  
  <p><strong>Simple Example:</strong></p>
  
  <p><strong>MainComponent</strong></p>
  
  <pre><code>@Component({
        selector: selector,
        templateUrl: tmplUrl,
        directives: [ FORM_DIRECTIVES ]
  })
  export class MainFormComponent {
  
      public mainForm: ControlGroup;
      public recipientForm: ControlGroup;
      public recipientData: RecipientModel; //testing variable for use ngModel
  
      constructor(private fb: FormBuilder, public cdr: ChangeDetectorRef ) {
  
          this.recipientData = new RecipientModel(); //testing instance variable
          this.recipientForm = new ControlGroup({});    
          this.mainForm = this.fb.group({
               'user_name': ['Test User', Validators.required],
          });
      }
  
      onSubmit(): void {
          console.log('Submitted value:', this.mainForm.value);
          console.log('Recipient data:', this.recipientForm.value);
        }
  }
  </code></pre>
  
  <p><strong>MainTemplate:</strong></p>
  
  <pre><code>&lt;form [ngFormModel]="mainForm" class="form-inline" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;User name:&lt;/label&gt; 
      &lt;input type="text" class="form-control" 
          [ngFormControl]="mainForm.controls['user_name']"/&gt;
    &lt;/div&gt;
    &lt;form-recipient [subFormData]="recipientData" 
          [subForm]="recipientForm"&gt;&lt;/form-recipient&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>MainFormComponent</strong></p>
  
  <pre><code>@Component({
    selector: selector,
    templateUrl: tmplUrl,
    directives: [ FORM_DIRECTIVES ]
  })
  export class FormRecipientComponent {
  
    @Input() public subForm: ControlGroup;
    @Input() public subFormData: RecipientModel;
  
    constructor(private fb: FormBuilder,public cdr: ChangeDetectorRef) {
        this.subForm = this.fb.group({
            'recipient_name': ['John Doe', Validators.required],
            'recipient_name_ex': ['', Validators.required],
            'recipient_address': ['Baker Street', Validators.required]
        });
    }
  
  
    ngAfterViewInit(){
        // this.cdr.detectChanges();
        console.log('RecipientSubForm', this.subForm.value);
    }
  
  }
  
  export class RecipientModel {
      public recipient_name: string;
      public recipient_name_ex: string;
      public recipient_address: string;
  }
  </code></pre>
  
  <p><strong>SubForm Template</strong></p>
  
  <pre><code>&lt;form [ngFormModel]="subForm" class="form-inline"&gt;
    &lt;div&gt;Validate: &lt;span *ngIf="subForm.valid"&gt;OK&lt;/span&gt;&lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;Recipient name:&lt;/label&gt;
        &lt;input type="text" class="form-control"
              [ngFormControl]="subForm.controls['recipient_name']"
              /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;Recipient cd..&lt;/label&gt;
        &lt;input type="text" class="form-control"
              [ngFormControl]="subForm.controls['recipient_name_ex']"
              /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;Recipient address:&lt;/label&gt;
        &lt;input type="text" class="form-control"
              [ngFormControl]="subForm.controls['recipient_address']"
              /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>My submit result is:</p>
  
  <pre><code>Recipient form: Object {}
  </code></pre>