如何在angular 6中动态添加输入字段

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

@Component({
  selector: 'app-dynamic-input',
  template: `
    <input [(ngModel)]="value" (ngModelChange)="onChange()">
  `
})
export class DynamicInputComponent {
  @Input() value: string;
  @Input() onChangeCallback: Function;

  onChange() {
    this.onChangeCallback(this.value);
  }
}

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

@Component({
  selector: 'app-parent-component',
  template: `
    <form [formGroup]="form">
      <div formArrayName="inputs">
        <div *ngFor="let input of inputs.controls; let i = index">
          <app-dynamic-input [value]="input.value" [onChangeCallback]="updateValue.bind(this, i)"></app-dynamic-input>
        </div>
      </div>
      <button (click)="addInput()">Add Input</button>
    </form>
  `
})
export class ParentComponent {
  form: FormGroup;
  inputs: FormArray;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      inputs: this.fb.array([])
    });
    this.inputs = this.form.get('inputs') as FormArray;
  }

  addInput() {
    this.inputs.push(this.fb.control(''));
  }

  updateValue(index: number, value: string) {
    this.inputs.at(index).setValue(value);
  }
}