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
进行联动从而降低维护成本:文章来源:https://www.toymoban.com/news/detail-644550.html
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模板网!