onValuesChange里的 form.validateFields 一直 catch errors

因为 onValuesChange 的执行总是在 validation 之前,所以 validateFields 会报错且 outOfDate 显示 true,解决办法加 setTimeout

const valueChange = () => {
    setTimeout(() => {
      form
        .validateFields(["name", "age"])
        .then((res) => console.log("res", res))
        .catch((err) => console.log("err", err));
    });
  };

<Form form={form} onValuesChange={valueChange}>
...
</Form>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`form.validateFields()`是Ant Design表单组件中的一个方法,用于验证表单中的所有字段。它会遍历表单中的所有字段,依次调用每个字段的校验规则进行验证,并返回一个Promise对象,验证结果会包含所有字段的验证结果。 `form.validateFields()`方法的语法如下: ```javascript form.validateFields([fieldNames: string[]], [options: object], callback(errors, values)) ``` 其中,`fieldNames`参数是一个可选的字符串数组,指定需要验证的字段名称。如果未指定该参数,则会验证表单中的所有字段。 `options`参数是一个可选的对象,用于指定验证选项。常用的选项包括: - `force`: 是否强制验证,即使字段未被修改也会进行验证,默认为`false`。 - `scroll`: 是否在验证失败时滚动到第一个验证失败的字段,默认为`true`。 - `firstFields`: 在验证失败时,优先滚动到指定的字段,默认为`undefined`。 `callback`参数是一个回调函数,用于处理验证结果。它接受两个参数:`errors`和`values`。`errors`是一个对象,包含了所有验证失败的字段以及对应的错误信息;`values`是一个对象,包含了所有字段的最新值。 下面是一个简单的示例,演示如何使用`form.validateFields()`方法验证表单: ```javascript import { Form, Input, Button } from 'antd'; const DemoForm = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log('Received values of form: ', values); }; const onFinishFailed = (errors) => { console.log('Failed:', errors); }; const handleValidate = () => { form.validateFields().then((values) => { console.log('Success:', values); onFinish(values); }).catch((errors) => { console.log('Failed:', errors); onFinishFailed(errors); }); }; return ( <Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item name="username" label="Username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item name="password" label="Password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" onClick={handleValidate}>Validate</Button> </Form.Item> </Form> ); }; ``` 在这个示例中,我们使用了Ant Design的`Form`组件,并在组件外部定义了一个`handleValidate`函数,用于执行表单验证。当用户点击“验证”按钮时,该函数会调用`form.validateFields()`方法进行表单验证。如果验证通过,它会调用`onFinish`回调函数,将验证结果传递给该函数进行处理;如果验证失败,则会调用`onFinishFailed`回调函数。 注意,`form.validateFields()`方法返回的是一个Promise对象,您需要使用`.then()`和`.catch()`方法来处理验证结果。另外,在使用Ant Design的`Form`组件时,您需要使用`Form.useForm()`方法来获取表单实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值