動態增長響應式表單

頁面文件：

---

<form *ngFor="let form of list" [formGroup]="form">
  <div class="form-group">
    <label>姓名：</label>
    <input style="color: #000;" type="text" formControlName="name">
  </div>
  <div class="form-group">
    <label>年齡：</label>
    <input style="color: #000;" type="text" formControlName="age">
  </div>
</form>

<button type="button" class="btn btn-primary" (click)="addForm()">增長表單</button>
<button type="button" class="btn btn-primary" (click)="printAllForm()">打印全部表單信息</button>

ts 文件：

---

import { Component, OnInit } from '@angular/core';import {FormBuilder, FormGroup} from '@angular/forms';@Component({  selector: 'app-dynamic-add-reactive-form',  templateUrl: './dynamic-add-reactive-form.component.html',  styleUrls: ['./dynamic-add-reactive-form.component.css']})export class DynamicAddReactiveFormComponent implements OnInit {  private list: Array<FormGroup>;  private formNum = 0;  constructor(    private fb: FormBuilder  ) {}  ngOnInit() {    this.list = [];  }  public addForm(): void {    // 動態建立響應式表單    let newform = this['inFlowManholelistForm' + this.formNum];    newform = this.fb.group({      name: [''],      age: ['']    });    this.formNum += 1;    this.list.push(newform);  }  public printAllForm(): void {    this.list.map((value, index) => {      console.log(value.value);    });  }}---------------------記一記--------------