angular reactive表单动态添加和删除控件并验证

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

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      items: this.formBuilder.array([])
    });
  }

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

  addItem() {
    const item = this.formBuilder.group({
      name: ['', Validators.required],
      quantity: ['', Validators.required]
    });

    this.itemForms.push(item);
  }

  deleteItem(index: number) {
    this.itemForms.removeAt(index);
  }

  submitForm() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <div formArrayName="items">
    <div *ngFor="let item of itemForms.controls; let i = index" [formGroupName]="i">
      <input type="text" formControlName="name" placeholder="Name">
      <input type="number" formControlName="quantity" placeholder="Quantity">
      <button type="button" (click)="deleteItem(i)">Delete</button>
    </div>
  </div>
  <button type="button" (click)="addItem()">Add Item</button>
  <button type="submit">Submit</button>
</form>