动态增加响应式表单

页面文件：

<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);    });  }}

---------------------记一记--------------

原文地址：https://www.cnblogs.com/hello-dummy/p/9406289.html