title: Angular: Validate form with multiple child components
body: <p>Using Angular 6 here:</p>
  
  <p>I have a parent component and within that I have 3 child components. 
  The child 1 component has a text fields, child 2 component has a dropdown and child 3 component has a dropdown and a submit button.</p>
  
  <p>On the submit click button of child 3, I want to validate all the inputs of child1, child2 and child3 as they are required and throw error accordingly.</p>
  
  <p>With angularjs I can just bind to ngmodel and check if form is invalid. How can I do so in angular? I mean how can I get and pass the state of input from one child to another etc.
  When searching I found the concept of reactive forms but most of the articles are of parents forms having input only. </p>
  
  <p>Would appreciate if anyone can provide help on this. Below is the code I have </p>
  
  <p>--Updated--</p>
  
  <p>I updated below code after following this post: <a href="https://medium.com/@joshblf/using-child-components-in-angular-forms-d44e60036664" rel="noreferrer">https://medium.com/@joshblf/using-child-components-in-angular-forms-d44e60036664</a></p>
  
  <p>But this one keeps on giving me error in console: "<em>Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
         directive and pass it an existing FormGroup instance (you can create one in your class).</em>"</p>
  
  <p>--Updated code with reactive form--   </p>
  
  <pre><code>--Parent--
  
  &lt;form class="form-horizontal" [formGroup]="myForm"&gt;
      &lt;div class="row"&gt;     
        &lt;ct-child1  [myForm]="myForm"&gt;&lt;/ct-child1&gt;          
        &lt;ct-child2&gt; &lt;/ct-child2&gt;      
      &lt;/div&gt;
      &lt;div class="row"&gt;      
        &lt;ct-child3&gt;&lt;/ct-child3&gt;         
      &lt;/div&gt;   
  &lt;/form&gt;
  
  import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
    selector: 'ct-parent',
    templateUrl: './parent.component.html']
  })
  export class ParentComponent implements OnInit  {
    myForm: FormGroup;
    constructor(private fb: FormBuilder) { }
    ngOnInit() {
        this.myForm = this.fb.group({
        uname: ['', Validators.required]
      });
      }  
   }
  
   --Child 1--
  
  &lt;div class="panel-body"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="myForm" class="col-sm-3 control-label"&gt;Name:&lt;/label&gt;
      &lt;div class="col-sm-8"&gt;
        &lt;input type="text" class="form-control" name="uname" [formControlName]="'uname'"  placeholder="Enter Name..." required &gt;
      &lt;/div&gt;
    &lt;/div&gt;      
  &lt;/div&gt;
  
  import { Component, OnInit } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  
  @Component({
    selector: 'ct-child1',
    templateUrl: './child1.component.html']
  })
  export class Child1Component implements OnInit { 
    @Input() myForm: FormGroup;
    constructor() { }
    uname: string; 
  
    ngOnInit() { }
  }
  </code></pre>