Angular Formly -从数组类型中删除添加/删除按钮

Angular Formly是一个Angular的表单构建工具，它提供了一种简洁和灵活的方式来定义和管理表单。Angular Formly的一个重要特性是它可以从数组类型中添加和删除按钮。

添加按钮允许用户动态地向数组类型的表单字段添加新的元素。删除按钮则允许用户从数组中移除特定的元素。这样的功能对于需要动态添加或删除表单字段的场景非常有用，比如表单中的重复项或可变长度的列表。

在Angular Formly中，通过使用fieldArray类型来实现数组字段的添加和删除按钮。fieldArray类型是Angular Formly提供的特殊类型，用于处理数组类型的表单字段。

以下是使用Angular Formly实现从数组类型中添加和删除按钮的步骤：

定义数组字段的模型：

const model = {
  items: [] // 数组字段，初始为空数组
};

定义数组字段的表单配置：

const fields = [
  {
    key: 'items',
    type: 'fieldArray', // 使用fieldArray类型
    templateOptions: {
      label: 'Items'
    },
    fieldArray: {
      fieldGroup: [
        {
          type: 'input',
          key: 'name',
          templateOptions: {
            label: 'Name'
          }
        },
        {
          type: 'input',
          key: 'quantity',
          templateOptions: {
            label: 'Quantity'
          }
        }
      ]
    }
  }
];

在上面的代码中，我们定义了一个名为items的数组字段，并在fieldArray配置中指定了数组字段的子字段。在这个示例中，子字段包含name和quantity两个输入字段。

在HTML模板中使用Angular Formly生成表单：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
  <button (click)="addNewItem()">Add Item</button> <!-- 添加按钮 -->
  <button (click)="removeItem(index)">Remove Item</button> <!-- 删除按钮 -->
  <button type="submit">Submit</button>
</form>

在上面的代码中，我们使用formly-form组件和fields配置生成了表单。同时，我们添加了一个"Add Item"按钮和一个"Remove Item"按钮，分别用于添加和删除数组字段的元素。

在组件类中添加相应的逻辑：

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  form = new FormGroup({});
  model = {
    items: []
  };
  fields = [...]; // 上面定义的表单配置

  addNewItem() {
    this.model.items.push({}); // 向数组字段添加新元素
  }

  removeItem(index: number) {
    this.model.items.splice(index, 1); // 从数组字段移除指定的元素
  }

  onSubmit() {
    // 表单提交逻辑
  }
}

在上面的代码中，我们添加了addNewItem()方法和removeItem()方法，用于在模型中添加和删除数组字段的元素。通过push()方法可以向数组字段添加新元素，通过splice()方法可以从数组字段移除指定的元素。

通过以上的步骤，我们就可以使用Angular Formly实现从数组类型中添加和删除按钮的功能。这样，用户就可以根据需要动态地调整表单中的数组字段。

如果你希望在腾讯云上使用类似的功能，可以参考腾讯云的云开发产品和服务，如云函数、云数据库等，以实现类似的表单动态调整功能。你可以访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多相关产品和服务信息。