使用Angular中的反应式表单根据条件动态添加行

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

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      rows: this.fb.array([])
    });
  }

  get rows() {
    return this.form.get('rows') as FormArray;
  }

  addRow() {
    this.rows.push(this.fb.group({
      // 表单行中的字段
      name: '',
      age: ''
    }));
  }

  removeRow(index: number) {
    this.rows.removeAt(index);
  }
}

<form [formGroup]="form">
  <div formArrayName="rows">
    <div *ngFor="let row of rows.controls; let i = index" [formGroupName]="i">
      <input formControlName="name" placeholder="Name">
      <input formControlName="age" placeholder="Age">
      <button (click)="removeRow(i)">Remove</button>
    </div>
  </div>
  <button (click)="addRow()">Add Row</button>
</form>