antd form表单验证，表单初始值

古城微笑少年丶 2022-11-16 13:42 468阅读 0赞

form.setFieldsValue(initialValues);实现设置初始默认值  
form.validateFields()实现对输入的值进行验证

完整代码如下：

import React, { useState, useEffect } from 'react';
    import { Button, Form, Modal, Input, } from 'antd';
    import _ from 'lodash';
    import { connect, useIntl } from 'umi';
    import styles from './PaneSvgAddLabelModal.less';
    function PaneSvgAddLabelModal({ visible, onCancel, onOk, currentType,currentLabel }) {
      const intl = useIntl();
      const [form] = Form.useForm();
      useEffect(() => {
        const initialValues = {
          nameIntl_zh: currentLabel?.node?.nameIntl && currentLabel.node.nameIntl['zh-cn'],
          nameIntl_en: currentLabel?.node?.nameIntl && currentLabel.node.nameIntl['en-us'],
        };
        form.setFieldsValue(initialValues);
      },[currentLabel]);
      function handleConfirm() {
        form.validateFields().then(values => {
          const nameIntl = {
              'zh-cn': values.nameIntl_zh,
              'en-us': values.nameIntl_en,
          };
          onOk(nameIntl);
        });
      }
      function handleCancel() {
        onCancel();
      }
      const formItemLayout = {
        labelCol: { span: 5 },
        wrapperCol: { span: 17 },
      };
      return (
        <Modal
          visible={visible}
          title={
            currentType==='Add'?intl.formatMessage({ id: 'company.manager.detail.svg-info-add-label-title' })
            :currentType==='Rename'?intl.formatMessage({ id: 'company.manager.detail.svg-info-label-rename-title' }):null
          }
          onOk={handleConfirm}
          onCancel={handleCancel}
          footer={null}
        >
          <Form form={form} hideRequiredMark>
            <Form.Item
              {...formItemLayout}
              label={intl.formatMessage({ id: 'language.chinese' })}
              name="nameIntl_zh"
              key='nameIntl_zh'
              rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'placeholder.enter' }),
                },
              ]}
            >
              <Input placeholder={intl.formatMessage({ id: 'placeholder.enter' })}/>
            </Form.Item>
            <Form.Item
              {...formItemLayout}
              label={intl.formatMessage({ id: 'language.english' })}
              name="nameIntl_en"
              key='nameIntl_en'
              rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'placeholder.enter' }),
                },
              ]}
            >
              <Input placeholder={intl.formatMessage({ id: 'placeholder.enter' })}/>
            </Form.Item>
          </Form>
          <div className={styles.PaneSvgEditButtonWrap}>
            <Button value="cancel" className={styles.PaneSvgEditButtonCancel} onClick={handleCancel}>{intl.formatMessage({ id: `btn.cancel` })}</Button>
            <Button value="submit" onClick={handleConfirm} className={styles.PaneSvgEditButtonConfirm}>{intl.formatMessage({ id: `btn.confirm` })}</Button>
          </div>
        </Modal>
      );
    }
    
    export default connect(({ user }) => ({
    }))(PaneSvgAddLabelModal);

对form中的swith进行赋值:valuePropName="checked"

<Form.Item
        name="ifOpen"
        key='ifOpen'
        valuePropName="checked"
    >
        <Switch />
    </Form.Item>

自定义校验规则

rules={[
                {
                  required: true,
                  message: intl.formatMessage({ id: 'message.manage.notice.add.limit.tip' }),
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (value && value.length<=140) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error(intl.formatMessage({ id: 'message.manage.notice.add.limit.tip' })));
                  },
                }),
              ]}

清空所有表单内容

form.resetFields();

*  表单检测一些更改的值

<Form
                className={styles.content}
                initialValues={
       {
                  optionType: 'not',
                }}
                hideRequiredMark
                form={form}
                onFieldsChange={changedFields => {
                  if (changedFields.length > 0) {
                    const { name, value } = changedFields[0];
                    if (name.length > 0) {
                      if (name[0] === 'optionType') {
                        setOptionType(value);
                      } else if (name[0] === 'inputType') {
                        setInputType(value);
                      }
                    }
                  }
                }}
              >

完整代码，给表单内的radio按钮设置初始值，并且随着按钮值变化，而变化

<Form
                    className={styles.content}
                    initialValues={
       {
                        whetherSubmit: 'can_submit',
                    }}
                    hideRequiredMark
                    form={form}
                    onFieldsChange={changedFields => {
                        if (changedFields.length > 0) {
                            const { name, value } = changedFields[0];
                            if (name.length > 0) {
                                if (name[0] === 'whetherSubmit') {
                                    setCanSubmit(value);
                                }
                            }
                        }
                    }}
                >
    
                    <Form.Item
                        key="whetherSubmit"
                        isIntl={false}
                        label='1'
                        name="whetherSubmit"
                        input={
                            <Radio.Group>
                                <Radio value="Do_not_submit">no</Radio>
                                <Radio value="can_submit">yes</Radio>
                            </Radio.Group>
                        }
                    />
    
                    {canSubmit === 'can_submit' && <div>
                        <Form.Item
                            key="verification"
                            isIntl={false}
                            label='2'
                            name="verification"
                            input={
                                <Button>按钮</Button>
                            }
                        />
                    </div>}
    
                </Form>

*  获取我们form表单的值

form.getFieldValue('prefilledValue')

*  出现报错信息：validateDOMNesting(...): <form> cannot appear as a descendant of <form>.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

原因是：DOM renders to something like this

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221022/6407de6dc5f04abab94b561b62882eed.png