ant.design（简称antd）中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

        ant.design（简称antd）现在我们使用较为广泛，web端中后台表单使用非常广泛，此遍文章集合了表单日常用法及使用注意事项。

        下图是UI目标样式图                

         1、以下是一个组件，首先引入ant相关依赖，在引入react相关依赖,主要使用了Form的2个内置函数和Form.useWatch进行监听指定字段,然后使用 form.setFieldsValue进行字段值更新。

        2、表单验证相关规则使用在Form.Item中配置rules即可，required设置为true是为必填项,message为对应的提示信息。

        3、onFinish函数是在按钮设置了htmlType="submit"属性，在点击效验规则全部通过时触发的函数。

        4、onFinishFailed函数是在按钮设置了htmlType="submit"属性，在点击效验规则有部分未通过效验时触发的函数。

        注意：Form.List 下的字段不应该配置 initialValue，你始终应该通过 Form.List 的 initialValue 或者 Form 的 initialValues 来配置。

        Form.useWatch#

    type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance): Value

4.20.0 新增，用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 useSWR 进行联动从而降低维护成本：

 form.setFieldsValue({
      bbsiRuleArrangeVos: bbsiRuleArrangeVos,
 });

import { Space, Table, Form, Input, Button, Radio, Select, Divider, DatePicker } from 'antd';
import { EyeOutlined, DeleteOutlined, ToolOutlined, PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import React, { useEffect, useState, useRef } from 'react';

import { useHistory, useRequest } from 'umi';

import styles from './index.less';
import moment from 'moment';

const { RangePicker } = DatePicker;
const { TextArea } = Input;
function addRule() {
  
  const history = useHistory();
  const addRuleRef = useRef();
  const [form] = Form.useForm();
  const bbsiRuleArrangeVos = Form.useWatch('bbsiRuleArrangeVos', form);
  
  const onFinish = (values) => {
    console.log('Success:', values, bbsiRuleArrangeVos);
    const { ruleName, signingMethod, bbsiRuleArrangeVos,templeteId } = values;
    handleArray(bbsiRuleArrangeVos);
  };

  const handleArray = (arr) => {
    if (Array.isArray(arr)) {
      arr.map((item) => {
        item.signInBeginTime = item.signInTime ? moment(item.signInTime?.[0]).format('YYYY-MM-DD HH:mm:ss') : '';
        item.signInEndTime = item.signInTime ? moment(item.signInTime?.[1]).format('YYYY-MM-DD HH:mm:ss') : '';
        delete item.btn
        delete item.signInTime
        return item;
      });
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const addPeoleFunc = (index) => {
    bbsiRuleArrangeVos[index].btn = index;
    setPeopleIndex(index);
    addRuleRef.current.openModel();
    //更新字段值
    form.setFieldsValue({
      bbsiRuleArrangeVos: bbsiRuleArrangeVos,
    });
  };

  return (
    <div className={styles.SignRuleAddRule}>
      <Form
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        form={form}
      >
        <Form.Item
          label="规则名称"
          name="ruleName"
          rules={[
            {
              required: true,
              message: '请输入!',
            },
          ]}
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 4,
          }}
        >
          <Input />
        </Form.Item>
        <Form.Item
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 4,
          }}
          label="签约方式"
          name="signingMethod"
          rules={[
            {
              required: true,
              message: '请选择签约方式!',
            },
          ]}
        >
          <Radio.Group>
            <Radio value="1"> 线上签约 </Radio>
            <Radio value="2"> 线下签约 </Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 4,
          }}
          label="签约告知书"
          name="templeteId"
        >
          <Select>
            {SelectByTypeArr.map((item, index) => {
              return (
                <Select.Option value={item.templeteId} key={index}>
                  {item.templeteName}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Divider />
        <Form.List name="bbsiRuleArrangeVos" layout="horizontal">
          {(fields, { add, remove }) => (
            <>
              {fields.map(({ key, name, ...restField }, index) => (
                <div
                  style={{ border: '1px dashed #73aff2', backgroundColor: '#f5faff', padding: '20px', marginBottom: 8 }}
                >
                  <Space
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'flex-start',
                    }}
                  >
                    <Space
                      key={index}
                      style={{
                        display: 'flex',
                        marginBottom: 8,
                        flexDirection: 'column',
                      }}
                      align="baseline"
                      wrap
                    >
                      <Form.Item
                        name={[name, 'signInTime']}
                        label="签约时间"
                        {...restField}
                        rules={[
                          {
                            required: true,
                            message: '请选择日期',
                          },
                        ]}
                      >
                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                      </Form.Item>

                      <Form.Item
                        {...restField}
                        name={[name, 'signAddress']}
                        label="地点"
                        rules={[
                          {
                            required: true,
                            message: '请输入内容',
                          },
                        ]}
                      >
                        <TextArea rows={5} />
                      </Form.Item>
                      <Form.Item name={[name, 'btn']}>
                        <Button onClick={() => addPeoleFunc(index)}>+添加人员</Button>
                      </Form.Item>
                    </Space>
                    <Space>
                      <DeleteOutlined />
                      <span style={{ color: '#fb595a', cursor: 'pointer' }} onClick={() => remove(name)}>
                        删除安排
                      </span>
                    </Space>
                  </Space>
                </div>
              ))}
              <Form.Item
                labelCol={{
                  span: 4,
                }}
                wrapperCol={{
                  span: 12,
                }}
                style={{ justifyContent: 'center' }}
              >
                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                  添加安排
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
        <Form.Item style={{ justifyContent: 'center' }}>
          <Space
            size="large"
            style={{
              justifyContent: 'center',
              width: '100%',
            }}
          >
            <Button type="primary" htmlType="submit">
              确定
            </Button>
            <Button>取消</Button>
          </Space>
        </Form.Item>
      </Form>
     
    </div>
  );
}

export default addRule;

        大家在使用过程中有问题的，可以在评论区留言文章来源地址https://www.toymoban.com/news/detail-644550.html

到了这里，关于ant.design（简称antd）中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！