antd pro项目中遇到弹框嵌套表单的需求,并获取其中的数据,
在官方提供的Form表单API中有一个触发表单验证的方法validateFields 触发表单验证
类型: (nameList?: NamePath[]) => Promise
如下为项目中使用
const [form] = Form.useForm();//此为Modal点击确定以后的回调const okHandle = async () => {const fieldsValue = await form.validateFields();// const fieldsValue = await this.form.current.validateFields(); 如果是在 class component 下，需要通过 ref 获取数据域。//fieldsValue即为表单内的值console.log("okHandle -> fieldsValue", fieldsValue)};
如果是在 class component 下，需要通过 ref 获取数据域。
form = React.createRef();//此为Modal点击确定以后的回调const okHandle = async () => {const fieldsValue = await this.form.current.validateFields(); //fieldsValue即为表单内的值console.log("okHandle -> fieldsValue", fieldsValue)};
<ModaldestroyOnClosetitle="创建表单"visible={modalVisible}onOk={okHandle}onCancel={() => onCancel()}><Formform={form}{...layout}><FormItemlabel="表单标题"name="subject"rules={[{required: true }]}><Input placeholder="请输入" /></FormItem><Form.Item label="模版"><Select options={pickList} /></Form.Item><FormItemlabel="流转步骤"name="desc"><Input placeholder="请输入" disabled /></FormItem><FormItemlabel="评定量表"name="desc"><Input placeholder="请输入" disabled /></FormItem><Form.Item label="人员选择"><TreeSelecttreeData={treeData}/></Form.Item><Form.Item name="startDate"rules={[{required: true }]}label="开始日期"><DatePicker /></Form.Item><Form.Itemname="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>
