动态增加响应式表单

Posted 2020-12-27 hello-dummy

页面文件：

---

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


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