title: Angular (4): transfer ngForm & ngModelGroup from parent to child and use form validation
body: <p>I'd like to transfer my ngForm and ngModelGroup from parent component to child component and also use form validation functionality in the child component.</p>
  
  <p><strong>Parent component.html:</strong></p>
  
  <pre><code>&lt;md-step [stepControl]="createIntegrationPartnerRequestGroup"&gt;
    &lt;form #createIntegrationPartnerRequestForm="ngForm"&gt;
      &lt;div ngModelGroup="createIntegrationPartnerRequestGroup" #createIntegrationPartnerRequestGroup="ngModelGroup"&gt;
        &lt;div class="row p-row-padding"&gt;
          &lt;div class="col-xs-12"&gt;
            &lt;ng-template mdStepLabel&gt;
              {{'INTEGRATION_PARTNER_REQUEST' | translate}}
            &lt;/ng-template&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;integration-partner-request [form]="createIntegrationPartnerRequestForm"
                                     [model]="createIntegrationPartnerRequestGroup"&gt;&lt;/integration-partner-request&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/md-step&gt;
  </code></pre>
  
  <p><strong>Child Component.html (excerpt):</strong></p>
  
  <pre><code>&lt;div class="row p-row-padding"&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;md-input-container class="p-full-width"&gt;
        &lt;input mdInput
               ngModel name="name"
               #name="ngModel"
               required
               (change)="showForm()"
               placeholder="{{'WELCOME_WIZARD.PARTNER_NAME' | translate}}"&gt;
        &lt;md-error *ngIf="name.touched &amp;&amp; name.invalid"&gt;
          &lt;span *ngIf="name.errors.required"&gt;
            {{'WELCOME_WIZARD.FIELD_REQUIRED' | translate}}
          &lt;/span&gt;
          &lt;span *ngIf="name.errors.pattern"&gt;
            {{'WELCOME_WIZARD.INVALID_FIELD_FORMAT' | translate}}
          &lt;/span&gt;
        &lt;/md-error&gt;
      &lt;/md-input-container&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;md-input-container class="p-full-width"&gt;
        &lt;input mdInput
               ngModel name="status"
               #status="ngModel"
               placeholder="{{'WELCOME_WIZARD.PARTNER_STATUS' | translate}}"&gt;
        &lt;md-error *ngIf="status.touched &amp;&amp; status.invalid"&gt;
          &lt;span *ngIf="status.errors.required"&gt;
            {{'WELCOME_WIZARD.FIELD_REQUIRED' | translate}}
          &lt;/span&gt;
          &lt;span *ngIf="status.errors.pattern"&gt;
            {{'WELCOME_WIZARD.INVALID_FIELD_FORMAT' | translate}}
          &lt;/span&gt;
        &lt;/md-error&gt;
      &lt;/md-input-container&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Child Component.ts:</strong> </p>
  
  <pre><code>export class ChildComponent implements OnInit {
  
    @Input() public form: FormGroup;
    @Input() public model: NgModelGroup;
    @Input() public type: string;
  
    public formResult;
    public modelResult;
  
    constructor() {
    }
  
    ngOnInit() {
      this.formResult = this.form;
      this.modelResult = this.model;
    }
  
    public showForm() {
      console.log(this.formResult);
      console.log(this.modelResult);
    }
  
  }
  </code></pre>
  
  <p>There's also a button in the child component which should only work if the required field is not empty, but that is not the case, since the <code>modelResult</code> doesn't have any field values...:</p>
  
  <pre><code>&lt;button
    class="p-full-width"
    md-raised-button
    [disabled]="formResult.invalid"
    mdStepperNext&gt;
    {{'WELCOME_WIZARD.NEXT' | translate}}
  &lt;/button&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>