Angular动态表单

要实现Angular动态表单，主要使用formArray方法，formArray生成的实例是一个数组，在这个数组中可以动态的放入formGroup和formControl，这样便形成了动态表单。

export class ReativeFormsComponent implements OnInit {
  ngOnInit() {
    this.addContact()
  }
  //动态表单
  personMess: FormGroup = new FormGroup({
    //生成动态表单数组
    contacts: new FormArray([]) 
  })
  //获取数组对象
  get contacts(){
    return this.personMess.get('contacts') as FormArray
  }
  //增加一个表单组
  addContact(){
    let myContact = new FormGroup({
      name: new FormControl(),
      phone: new FormControl()
    })
    this.contacts.push(myContact)
  }
   //删除一个表单组
  deleteContact(i:number){
    this.contacts.removeAt(i)
  }
  //提交表单
  OnSubmit() {
    console.log(this.personMess.value)
  }
}

<form [formGroup]="personMess" (submit)="OnSubmit()">
  <div formArrayName="contacts">
    <!-- 注意：这里遍历的时contacts.controls -->
    <div *ngFor="let contact of contacts.controls;let i =index" [formGroupName]="i">
      <input type="text" formControlName="name">
      <input type="text" formControlName="phone">
      <button (click)="deleteContact(i)">删除信息</button>
    </div>
  </div>
  <button (click)="addContact()">添加信息</button><br>
  <input type="submit">
</form>

效果：