要实现Ant Design动态表单的验证,可以使用React的useState和useEffect钩子来处理表单数据和验证规则的动态变化。以下是一个示例代码:
import React, { useState, useEffect } from "react";
import { Form, Input, Button } from "antd";
const DynamicFormValidation = () => {
const [form] = Form.useForm();
const [formFields, setFormFields] = useState([]);
const [formRules, setFormRules] = useState({});
useEffect(() => {
// 根据表单字段动态生成验证规则
const rules = {};
formFields.forEach(field => {
rules[field.name] = [
{
required: true,
message: `${field.label}不能为空`
}
];
});
setFormRules(rules);
}, [formFields]);
const handleAddField = () => {
// 添加新的表单字段
const newField = {
name: `field${formFields.length}`,
label: `Field ${formFields.length + 1}`
};
setFormFields([...formFields, newField]);
};
const handleRemoveField = index => {
// 移除表单字段
const updatedFields = [...formFields];
updatedFields.splice(index, 1);
setFormFields(updatedFields);
};
const handleSubmit = values => {
// 提交表单数据
console.log(values);
};
return (
))}
{formFields.length > 0 && (
)}
);
};
export default DynamicFormValidation;
在上述示例中,使用useState钩子来管理表单字段(formFields)和验证规则(formRules)。通过useEffect钩子在表单字段变化时动态生成验证规则。
在表单提交时,调用handleSubmit函数来处理表单数据。你可以根据自己的需求进行进一步的处理,例如发送请求等。
通过点击"添加字段"按钮可以动态添加新的表单字段,点击"移除字段"按钮可以移除最后一个表单字段。
每个表单字段都使用Ant Design的Form.Item组件来渲染,并设置对应的验证规则。