? ? ? ??ant.design（簡稱antd）現(xiàn)在我們使用較為廣泛，web端中后臺表單使用非常廣泛，此遍文章集合了表單日常用法及使用注意事項(xiàng)。
? ? ? ? 下圖是UI目標(biāo)樣式圖? ? ? ? ? ? ? ?
?
? ? ? ? ?1、以下是一個組件，首先引入ant相關(guān)依賴，在引入react相關(guān)依賴,主要使用了Form的2個內(nèi)置函數(shù)和Form.useWatch進(jìn)行監(jiān)聽指定字段,然后使用 form.setFieldsValue進(jìn)行字段值更新。
? ? ? ? 2、表單驗(yàn)證相關(guān)規(guī)則使用在Form.Item中配置rules即可，required設(shè)置為true是為必填項(xiàng),message為對應(yīng)的提示信息。
? ? ? ? 3、onFinish函數(shù)是在按鈕設(shè)置了htmlType="submit"屬性，在點(diǎn)擊效驗(yàn)規(guī)則全部通過時觸發(fā)的函數(shù)。
? ? ? ? 4、onFinishFailed函數(shù)是在按鈕設(shè)置了htmlType="submit"屬性，在點(diǎn)擊效驗(yàn)規(guī)則有部分未通過效驗(yàn)時觸發(fā)的函數(shù)。
????????注意：Form.List 下的字段不應(yīng)該配置?initialValue，你始終應(yīng)該通過 Form.List 的?initialValue?或者 Form 的?initialValues?來配置。
????????Form.useWatch#
????type Form.useWatch = (namePath: NamePath, formInstance?: FormInstance): Value
4.20.0?新增，用于直接獲取 form 中字段對應(yīng)的值。通過該 Hooks 可以與諸如?useSWR?進(jìn)行聯(lián)動從而降低維護(hù)成本：文章來源：http://www.zghlxwxcb.cn/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="規(guī)則名稱"
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="地點(diǎn)"
rules={[
{
required: true,
message: '請輸入內(nèi)容',
},
]}
>
<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;
????????大家在使用過程中有問題的，可以在評論區(qū)留言文章來源地址http://www.zghlxwxcb.cn/news/detail-644550.html
到了這里，關(guān)于ant.design（簡稱antd）中Form表單組件提交表單、表單數(shù)據(jù)效驗(yàn)、表單自定義效驗(yàn)、表單布局集合的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
