如何使用 Angular 中的添加按钮添加输入字段？

Question

因此，我有一个现有的乘客详细信息输入字段（姓名、地址、号码、电子邮件）。我想做的是使用添加按钮添加另一个乘客详细信息输入。到目前为止，这是我的按钮代码：

<div class="center">
          <button
          type="button"
          class="next-button"
          mat-flat-button
          matTooltip="Add new passenger"
          matTooltipClass="tooltipClass"
          matTooltipPosition="below"
          (click)=""
        >
          <mat-icon>add</mat-icon>
        </button>

Answer 1

这称为动态形式。您可以使用反应式表单来完成此操作（尽管比模板驱动的方式更详细）。使用 Angular 的formBuilder和formArray：

...
data = [{ name: '', address: '', phone: '', email: '' }]

form: FormGroup = this.formBuilder.group({
  contacts: this.formBuilder.array(data.map(
    contact => this.formBuilder.group(contact)
  ))
});

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

addContact() {
  this.contacts.push(this.formBuilder.group({
    name: null,
    address: null,
    phone: null,
    email: null
  }))
}
...

模板中还有一些棘手的东西：

<form [formGroup]="form" 
  <ng-container formArrayName="contacts" *ngFor="let contact of contacts.controls; index as i">
    <ng-container [formGroupName]="i">
      <input formControlName="name">
      <input formControlName="address">
      <input formControlName="phone">
      <input formControlName="email">
    </ng-container>
  </ng-container>
  
  <button type="button" (click)="addContact()">Add</button>
  ...
</form>

可以在此处找到示例 (Stackblitz) 。