antd form表单验证,表单初始值 古城微笑少年丶 2022-11-16 13:42 408阅读 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 <form> <div> <form> <input /> </form> </div> </form> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221022/6407de6dc5f04abab94b561b62882eed.png
还没有评论,来说两句吧...