我不能用form.list调用form.validateFields() - Ant Design



我想调用form.validateFields在form.list删除时进行验证,但我不能

<Form.List name="formList">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Form.Item
{...restField}
name={[name,"name"]}
fieldKey={[fieldKey,"fieldKey"]}
validateTrigger={["onChange", "onBlur", "onFocus"]}
// dependencies={[name]}
rules={[
{ required: true, message: "please enter text" },
{ 
pattern: new RegExp(/^[x00-x7F]+$/),
message: "please enter A-Z, a-z, 0-9" 
},
({ getFieldValue }) => ({
validator(_, value) {
if (value) {
const values: string[] = getFieldValue("formList");
const valuesTmp = [...values];
const idx = valuesTmp.findIndex((e) => e === value);
valuesTmp.splice(idx, 1);
return valuesTmp.find((item:any) => item.name === value) ? Promise.reject("It's duplicated") : Promise.resolve();
}
return Promise.resolve();
},
}),
]}
>
<Input placeholder="Enter your name" />
</Form.Item>
<MinusCircleOutlined onClick={() => {
remove(name)
form.validateFields(['formList',0,'name']) // this i want to call validate for check duplicate again
}} />
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add Token
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>

但当我按下删除按钮时,该字段会被删除,但不会再次验证。

蚂蚁设计告诉我:

<Form.List name="users">
{fields =>
fields.map(field => (
<React.Fragment key={field.key}>
<Form.Item name={[field.name, 'name']} {...someRest1} />
<Form.Item name={[field.name, 'age']} {...someRest1} />
</React.Fragment>
))
}
</Form.List>

依赖项应为['users',0,'name']从…起https://ant.design/components/form/#API

您可以这样使用它:

form.validateFields([['formList',0,'name'], ['formList',1,'name']])

数组中没有,但应该是表单字段。

validateFields(['age','name'])
.then(values => {
console.log("something");
// do whatever you need to
/*
values:
{
username: 'username',
password: 'password',
}
*/
})
.catch(errorInfo => {
/*
errorInfo:
{
values: {
username: 'username',
password: 'password',
},
errorFields: [
{ name: ['password'], errors: ['Please input your Password!'] },
],
out-of-date: false,
}
*/
});

最新更新