title: reactive form with component child in Angular
body: <p>As you can see I have a father form component with a component child.
  The {{myFormFather.value}} show me <code>nickName</code> value and <code>name</code> value but dont show <code>age</code> value.
  {{myFormFather.status}} it dont recognice the component child. Is like my child was a phantom, why?</p>
  
  <p><strong>my-form-father.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="myFormFather" (ngSubmit)="onSubmit()"&gt;
      &lt;input formControlName="nickName"&gt;
      &lt;input formControlName="name"&gt;
      &lt;my-form-child
              [age]="myFormFather"&gt;
      &lt;/my-form-child&gt;
      &lt;button type="submit"
              [disabled]="myFormFather.invalid"&gt;Save
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>my-form-father.ts</strong></p>
  
  <pre><code>myFormFather = new FormGroup({
      nickName: new FormControl(),
      name: new FormControl()
  });
  
  constructor(private fb:FormBuilder) {}
  
  ngOnInit() {this.createForm()}
  
  createForm() {
      this.myFormFather = this.fb.group({
          nickName: ['', [Validators.required],
          name: ['', [Validators.required]
      });
  }
  </code></pre>
  
  <p><strong>my-form-child.html</strong></p>
  
  <pre><code>&lt;div [formGroup]="ageForm"&gt;
      &lt;input formControlName="age"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>my-form-child.ts</strong></p>
  
  <pre><code>@Input() ageForm = new FormGroup({
      age: new FormControl()
  });
  
  constructor(private fb:FormBuilder) {}
  
  ngOnInit() {this.createForm()}
  
  createForm() {
      this.ageForm = this.fb.group({
          age: ['', [Validators.required]]
      });
  }
  </code></pre>