在Angular中如何通过添加按钮新增乘客信息输入字段？

你当前使用的是Angular + Angular Material技术栈，使用Angular响应式表单的FormArray能力即可快速实现需求，具体实现步骤如下：

• 第一步：在对应的Angular模块中导入响应式表单依赖
  在你的模块文件中引入：

import { ReactiveFormsModule } from '@angular/forms';

并将ReactiveFormsModule添加到@NgModule的imports数组中。

• 第二步：编写组件逻辑代码

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

@Component({
  selector: 'app-passenger-form',
  templateUrl: './passenger-form.component.html',
  styleUrls: ['./passenger-form.component.scss']
})
export class PassengerFormComponent {
  passengerForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // 初始化表单，默认自带1组乘客输入字段
    this.passengerForm = this.fb.group({
      passengers: this.fb.array([this.createPassengerGroup()])
    })
  }

  // 创建单组乘客信息的表单结构
  createPassengerGroup(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required], // 姓名
      address: ['', Validators.required], // 地址
      phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]], // 联系电话，可自行调整校验规则
      email: ['', [Validators.required, Validators.email]] // 邮箱
    })
  }

  // 快捷获取存储所有乘客信息的FormArray
  get passengers(): FormArray {
    return this.passengerForm.get('passengers') as FormArray;
  }

  // 点击添加按钮触发的方法，新增一组乘客输入字段
  addPassenger(): void {
    this.passengers.push(this.createPassengerGroup());
  }
}

• 第三步：调整模板代码

<form [formGroup]="passengerForm">
  <!-- 遍历渲染所有乘客输入组 -->
  <div formArrayName="passengers" *ngFor="let passenger of passengers.controls; let i = index">
    <div [formGroupName]="i" class="passenger-item">
      <mat-form-field appearance="fill">
        <mat-label>乘客姓名</mat-label>
        <input matInput formControlName="name">
      </mat-form-field>
      <mat-form-field appearance="fill">
        <mat-label>乘客地址</mat-label>
        <input matInput formControlName="address">
      </mat-form-field>
      <mat-form-field appearance="fill">
        <mat-label>联系电话</mat-label>
        <input matInput formControlName="phone">
      </mat-form-field>
      <mat-form-field appearance="fill">
        <mat-label>邮箱</mat-label>
        <input matInput formControlName="email">
      </mat-form-field>
    </div>
  </div>

  <!-- 你的原有添加按钮，仅需要补充click绑定即可 -->
  <div class="center">
    <button
    type="button"
    class="next-button"
    mat-flat-button
    matTooltip="Add new passenger"
    matTooltipClass="tooltipClass"
    matTooltipPosition="below"
    (click)="addPassenger()"
    >
      <mat-icon>add</mat-icon>
    </button>
  </div>
</form>

功能效果参考图：

提交表单时直接读取this.passengerForm.value.passengers即可获取所有乘客的结构化数组数据，无需额外做字段收集处理。

内容的提问来源于stack exchange，提问作者Rence Sacramento