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

【问题标题】：How to add input fields using a add button in Angular?如何使用 Angular 中的添加按钮添加输入字段？
【发布时间】：2021-10-21 16:15:20
【问题描述】：

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

<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>

【问题讨论】：

标签： angular button input add mat-icon

【解决方案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>

可以在here找到示例（Stackblitz）。

【讨论】：

【解决方案2】：

你可以像下面那样做。

app.component.ts

import { Component, OnInit, VERSION } from '@angular/core';
import { FormArray, FormControl, FormGroup } from '@angular/forms';

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

  ngOnInit() {
    this.form = new FormGroup({
      passenger: new FormArray([
        new FormGroup({
          name: new FormControl(''),
          address: new FormControl(''),
          number: new FormControl(''),
          email: new FormControl('')
        })
      ])
    });

    console.log(this.form);
  }

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

  addPassenger() {
    this.passenger.push(
      new FormGroup({
        name: new FormControl(''),
        address: new FormControl(''),
        number: new FormControl(''),
        email: new FormControl('')
      })
    );
  }
}

app.component.html

<form [formGroup]="form">
  <div formArrayName="passenger">
    <div
      *ngFor="let passengerGroup of passenger?.controls; let i = index"
      [formGroupName]="i"
    >
      <h3>passenger - {{i + 1}}</h3>
      <input type="text" formControlName="name" placeholder="name" />
      <input type="text" formControlName="address" placeholder="address" />
      <input type="text" formControlName="number" placeholder="number" />
      <input type="text" formControlName="email" placeholder="email" />
    </div>
  </div>

  <button (click)="addPassenger()">Add Passenger</button>
</form>

form - {{form.value | json}}

Working demo

如果您有任何疑问，请告诉我。

【讨论】：

【解决方案3】：

创建一个数组来存储乘客详细信息，例如姓名、电子邮件、号码和地址，并在单击添加按钮时使用*ngFor.push 新元素迭代表单。以下是步骤。

  passengerForm = [
    {
      name: '',
      address: '',
      number: '',
      email: ''
    }
  ];

基于passengerForm数组迭代表单。

<div *ngFor="let item of passengerForm">
  <div class="row">
    <div class="col-4">
      <input [(ngModel)]="item.name">
    </div>
    <div class="col-4">
      <input [(ngModel)]="item.number">

    </div>
    <div class="col-4">
      <input [(ngModel)]="item.email">

    </div>
    <div class="col-4">
      <input [(ngModel)]="item.address">
    </div>
  </div>
</div>

创建一个函数来推送新乘客的详细信息。

addForm() {
    this.passengerForm.push({
      name: '',
      address: '',
      number: '',
      email: ''
    });
  }

<button (click)="addForm()">add</button></button>

【讨论】：