antd 使用不同的条件动态验证 Form.Item
假设我们有一个 InputNumber,当进行操作1时,我们允许用户输入负数值,然而在进行操作2时,我们需要用户输入正整数。
我会用到一个名为 createValidator
的函数来实现这个需求。同时,我还会使用 Form.Item
的 dependencies
属性来更新 lowerLimitType
,像这样 dependencies={["lowerLimitType"]}
。
<Form.Item name="lowerLimitType" style={{ marginBottom: 0 }}>
<Radio.Group>
<Radio value={1}>操作1</Radio>
<Radio value={2}>操作2</Radio>
</Radio.Group>
</Form.Item>
<div style={{ display: "flex" }}>
<Form.Item
name="lowerLimit"
noStyle
dependencies={["lowerLimitType"]}
rules={[{ validator: createValidator("lowerLimit", "lowerLimitType") }]}
>
<InputNumber {...defaultData} />
</Form.Item>
</div>
</>;
下面是 createValidator
函数的实现:
function createValidator(fieldName: string, typeName: string) {
return (_: any, value: any) => {
if (
form.getFieldValue(typeName) === 2 &&
(value < 0 || !Number.isInteger(value))
) {
return Promise.reject(new Error("请输入正整数"));
}
return Promise.resolve();
};
}