antd pro項目中遇到彈框嵌套表單的需求,並獲取其中的數據,
在官方提供的Form表單API中有一個出發表單驗證的方法validateFields 觸發表單驗證
類型: (nameList?: NamePath[]) => Promise
如下爲項目中使用
//此爲Modal點擊確定以後的回調
const okHandle = async () => {
const fieldsValue = await form.validateFields();
//fieldsValue即爲表單內的值
console.log("okHandle -> fieldsValue", fieldsValue)
};
<Modal
destroyOnClose
title="創建表單"
visible={modalVisible}
onOk={okHandle}
onCancel={() => onCancel()}
>
<Form
form={form}
{...layout}>
<FormItem
label="表單標題"
name="subject"
rules={[{ required: true }]}
>
<Input placeholder="請輸入" />
</FormItem>
<Form.Item label="模版">
<Select options={pickList} />
</Form.Item>
<FormItem
label="流轉步驟"
name="desc"
>
<Input placeholder="請輸入" disabled />
</FormItem>
<FormItem
label="評定量表"
name="desc"
>
<Input placeholder="請輸入" disabled />
</FormItem>
<Form.Item label="人員選擇">
<TreeSelect
treeData={treeData}
/>
</Form.Item>
<Form.Item name="startDate"
rules={[{ required: true }]}
label="開始日期">
<DatePicker />
</Form.Item>
<Form.Item
name="isScheduleSent"
valuePropName="checked"
label="定時發送">
<Checkbox>開始日期後發送</Checkbox>
</Form.Item>
<Form.Item name="endDate" rules={[{ required: true }]} label="結束日期">
<DatePicker />
</Form.Item>
<Form.Item name="dueDate" rules={[{ required: true }]} label="到期日期">
<DatePicker />
</Form.Item>
</Form>
</Modal>