Angular 4/ Reactive Forms -在子组件中添加控件

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: `
    <form [formGroup]="form">
      <app-child [form]="form"></app-child>
    </form>
  `
})
export class ParentComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl(''),
      email: new FormControl('')
    });
  }
}

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-child',
  template: `
    <div [formGroup]="form">
      <input formControlName="name" placeholder="Name">
      <input formControlName="email" placeholder="Email">
      <button (click)="addControl()">Add Control</button>
    </div>
  `
})
export class ChildComponent {
  @Input() form: FormGroup;

  addControl() {
    this.form.addControl('newControl', new FormControl(''));
  }
}