反应式表单:角度表单数组和表单控件

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

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
          <input formControlName="name" placeholder="Item name">
          <input formControlName="quantity" placeholder="Quantity">
        </div>
      </div>
      <button (click)="addItem()">Add Item</button>
    </form>
  `
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      items: this.fb.array([])
    });
  }

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

  addItem() {
    const itemGroup = this.fb.group({
      name: ['', Validators.required],
      quantity: [0, Validators.min(1)]
    });
    this.items.push(itemGroup);
  }
}

<div *ngIf="item.get('name').invalid && (item.get('name').dirty || item.get('name').touched)">
  <div *ngIf="item.get('name').errors?.required">
    Name is required.
  </div>
</div>