在Angular中设置模板以匹配反应形式中的formArray值

// 在组件类中
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

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

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      emails: this.fb.array([
        this.fb.control('', [Validators.required, Validators.email])
      ])
    });
  }

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

  addEmail() {
    this.emailControls.push(this.fb.control('', [Validators.required, Validators.email]));
  }
}

<!-- 在模板文件中 -->
<form [formGroup]="form">
  <div formArrayName="emails">
    <div *ngFor="let emailControl of emailControls.controls; let i = index">
      <input [formControlName]="i" placeholder="Email">
    </div>
  </div>
  <button (click)="addEmail()">Add Email</button>
</form>

import { ChangeDetectorRef } from '@angular/core';

constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}

addEmail() {
  this.emailControls.push(this.fb.control('', [Validators.required, Validators.email]));
  this.cdr.detectChanges();
}