介绍：Ionic 5 FormArray - TypeScript

Ionic 5 是构建基于 Web 的混合应用程序的框架之一，它可通过使用 Angular 或 React 来创建。 Ionic 5 与 Angular 集成非常好，这使得创建表单更加容易和快速。

在 Angular 中，表单有时需要动态地添加和删除控件。如果您的表单具有可重复的重复项，则必须使用 FormArray。

FormArray 允许您迭代一组内容，并将其包含在表单中。以下是一个简单的表单数组示例：

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

@Component({
  selector: 'app-form',
  templateUrl: 'form.html',
})
export class FormComponent {

  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      users: new FormArray([]),
    });
  }

  addUser() {
    const user = new FormGroup({
      name: new FormControl(),
      age: new FormControl(),
    });
    (this.form.get('users') as FormArray).push(user);
  }

  deleteUser(index) {
    (this.form.get('users') as FormArray).removeAt(index);
  }

  onSubmit() {
    console.log(this.form.value);
  }
}

在上面的示例中，我们创建了一个名为 users 的 FormArray，然后添加 FormGroup 作为其子项。

addUser 函数用于将 FormGroup 添加到 FormArray 中。

deleteUser 函数用于从 FormArray 中删除 FormGroup。

最后，我们有一个 onSubmit 函数，该函数用于在控制台中输出表单值。

在模板中，我们可以通过循环迭代 FormArray 中的每个 FormGroup。

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <ion-list formArrayName="users">
    <ion-item *ngFor="let user of form.get('users').controls; let i = index" [formGroupName]="i">
      <ion-input formControlName="name" placeholder="Name"></ion-input>
      <ion-input formControlName="age" placeholder="Age"></ion-input>

      <ion-icon name="trash" slot="end" (click)="deleteUser(i)"></ion-icon>
    </ion-item>
  </ion-list>

  <ion-button expand="block" (click)="addUser()">Add User</ion-button>
  <ion-button type="submit" expand="block">Submit</ion-button>
</form>

在上面的示例中，我们循环遍历 FormArray，并使用控制组和索引进行迭代。

控件组名称将设置为当前索引。最后，我们通过单击垃圾桶图标删除控件组。

FormArray 是一个强大的工具，可用于创建重复项的动态表单控件。使用 Angular 和 Ionic 5 构建动态表单比以前更加容易。

结论

FormArray 是一种非常有用的组件，适用于需要重复项的动态表单。使用 Angular 和 Ionic 5 开发应用程序时，必须了解使用 FormArray 的方法。希望本文能为您提供帮助，谢谢！