Formbuilder 多个组

简介

Formbuilder 是一个用于生成 Web 表单的工具库。它提供了一组有用的组件和验证器，以及灵活的配置选项，让开发者可以快速地生成符合业务需求的表单。

Formbuilder 可以生成一个单一的表单，但如果需要多个表单，可以使用多个组的方式来实现。每个组可以有自己的表单字段和验证器，也可以与其他组进行联动。

示例

下面是一个简单的例子，展示如何使用 Formbuilder 创建多个组的表单：

import Formbuilder from 'formbuilder';

const form = new Formbuilder({
  groups: [
    {
      name: 'personalInfo',
      label: 'Personal Information',
      fields: [
        {
          name: 'firstName',
          label: 'First Name',
          type: 'text',
          validators: [
            { required: true, message: 'First name is required' },
          ],
        },
        {
          name: 'lastName',
          label: 'Last Name',
          type: 'text',
          validators: [
            { required: true, message: 'Last name is required' },
          ],
        },
      ],
    },
    {
      name: 'contactInfo',
      label: 'Contact Information',
      fields: [
        {
          name: 'email',
          label: 'Email',
          type: 'email',
          validators: [
            { required: true, message: 'Email is required' },
            { pattern: /^\S+@\S+\.\S+$/, message: 'Invalid email' },
          ],
        },
        {
          name: 'phone',
          label: 'Phone',
          type: 'tel',
          validators: [
            { required: true, message: 'Phone number is required' },
            { pattern: /^\d{3}-\d{3}-\d{4}$/, message: 'Invalid phone number' },
          ],
        },
      ],
    },
  ],
});

上面的代码创建了一个包含两个组的表单：Personal Information 和 Contact Information。每个组都有自己的字段和验证器。可以通过 form.getGroups() 方法获取所有组的信息，或者通过 form.getGroup(name) 方法获取特定的组。

组之间的联动

Formbuilder 提供了一些选项，使得不同组之间可以进行联动。例如，当 Personal Information 中的 First Name 字段被填写时，Contact Information 中的 Email 字段可以自动填写为 ${firstName}@example.com。

下面是一个实现这个功能的示例代码：

import Formbuilder from 'formbuilder';

const form = new Formbuilder({
  groups: [
    {
      name: 'personalInfo',
      label: 'Personal Information',
      fields: [
        {
          name: 'firstName',
          label: 'First Name',
          type: 'text',
          validators: [
            { required: true, message: 'First name is required' },
          ],
          onChange(value, form) {
            const emailField = form.getField('contactInfo.email');
            if (emailField && !emailField.getValue()) {
              const lastName = form.getFieldValue('personalInfo.lastName');
              emailField.setValue(`${value}.${lastName}@example.com`);
            }
          },
        },
        {
          name: 'lastName',
          label: 'Last Name',
          type: 'text',
          validators: [
            { required: true, message: 'Last name is required' },
          ],
          onChange(value, form) {
            const emailField = form.getField('contactInfo.email');
            if (emailField && !emailField.getValue()) {
              const firstName = form.getFieldValue('personalInfo.firstName');
              emailField.setValue(`${firstName}.${value}@example.com`);
            }
          },
        },
      ],
    },
    {
      name: 'contactInfo',
      label: 'Contact Information',
      fields: [
        {
          name: 'email',
          label: 'Email',
          type: 'email',
          validators: [
            { required: true, message: 'Email is required' },
            { pattern: /^\S+@\S+\.\S+$/, message: 'Invalid email' },
          ],
        },
        {
          name: 'phone',
          label: 'Phone',
          type: 'tel',
          validators: [
            { required: true, message: 'Phone number is required' },
            { pattern: /^\d{3}-\d{3}-\d{4}$/, message: 'Invalid phone number' },
          ],
        },
      ],
    },
  ],
});

上面的代码在 Personal Information 中的 First Name 和 Last Name 字段的 onChange 事件处理函数中，判断 Contact Information 中的 Email 字段是否为空，如果为空则根据 First Name 和 Last Name 的值自动生成一个邮箱地址，并将其填写到 Email 字段中。

结论

使用 Formbuilder 可以快速、方便地生成 Web 表单。通过多个组的方式，可以使得表单更加结构化和灵活，同时又不失易用性。在需要多个表单的场景下，使用 Formbuilder 多个组是一个非常不错的选择。