1 回答

TA貢獻1821條經驗 獲得超6個贊
你可以使用onValuesChange
來自 antd 的Form Api來檢查字段內容是否為空。
const onValuesChange = (changedValues, allValues) => {
const anyUser = allValues.user
? Object.values(allValues.user).filter(Boolean).length > 0
: false;
setUserRequired(anyUser);
const anyOtherItem = allValues.otherItem
? Object.values(allValues.otherItem).filter(Boolean).length > 0
: false;
setOtherItemRequired(anyOtherItem);
};
useState然后您可以通過 reacts鉤子將結果傳遞給rules表單項。
const [userRequired, setUserRequired] = useState(false);
示例表單項:
<Form.Item
name={["user", "name"]}
label="Name"
rules={[
{
required: userRequired
}
]}
>
最后但同樣重要的是,您必須在任何更改時驗證表單字段:
useEffect(() => {
form.validateFields();
});
這是您的工作CodeSandBox。
也可以在文檔中找到動態 Antd 規則的一個很好的示例。
添加回答
舉報