AntD Form submit is giving error: " need to revalidate"

Question

I have an AntD Form having multiple fields. I am using Form from "@ant-design/compatible". One of the field in the form is Radio having options as 'yes' and 'no' with initial value 'no'. When I try to submit the form, the validateFieldsAndScroll function is giving me the error ' need to revalidate'.

My Form code looks similar to this:

import React from "react";
import "./styles.css";
import { Form } from "@ant-design/compatible";
import { Radio, Button } from "antd";

const App = (props) => {
  const { getFieldDecorator } = props.form;
  const onClick = () => {
    props.form.validateFieldsAndScroll((err, values) => {
      if (err) {
        console.log("error", err);
      } else {
        console.log("success");
      }
    });
  };
  return (
    <div className="App">
      <Form layout="vertical">
        <Form.Item label="ABC">
          {getFieldDecorator("abc", {
            rules: [
              {
                required: true,
                message: "ABC is mandatory"
              }
            ],
            initialValue: "No",
          })(
            <Radio.Group disabled={false}>
              <Radio value="Yes">Yes</Radio>
              <Radio value="No">No</Radio>
            </Radio.Group>
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator("submitButton")(
            <Button type="primary" onClick={onClick}>
              Submit
            </Button>
          )}
        </Form.Item>
      </Form>
    </div>
  );
};

export default Form.create()(App);

Version of packages used:

    "@ant-design/compatible": "1.0.8",
    "antd": "4.11.2",
    "react": "16.9.0",
    "react-dom": "16.6.0"

Why is this error being thrown? How can this be fixed?

I tried recreating the issue in a sandbox with the exact version of the packages. Other than requiring to match the versions of React and ReactDOM (needed to do this as sandbox wasn't compiling), no other issue was shown and the code ran successfully without any error. Hence I was unable to recreate the issue.

I'd definitely recommend to upgrade your code to fit with the new useForm hook as presented in the documentation: https://ant.design/components/form/ — MS1, Nov 15 '22 at 19:40

score 0 · Answer 1 · answered Nov 15 '22 at 19:52

You should definitely use the useForm Hook here to avoid the dependency of compatible.

Take a look at the documentation on how to use it: ant.design/components/form

It's much more easy to read and understand than the old form handling with getFieldDecorator. This would be your Component using the useForm Hook:

import React from "react";
import { Radio, Button, Form } from "antd";

const App = (props) => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <div className="App">
      <Form layout="vertical" form={form} onFinish={onFinish}>
        <Form.Item
          label="ABC"
          name="abc"
          rules={[
            {
              required: true,
              message: "ABC is mandatory"
            }
          ]}
          initialValue="No"
        >
          <Radio.Group disabled={false}>
            <Radio value="Yes">Yes</Radio>
            <Radio value="No">No</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

Here is a codeSandbox Link: https://codesandbox.io/s/form-methods-class-component-antd-4-24-2-forked-5mcuqb?file=/demo.tsx

AntD Form submit is giving error: " need to revalidate"

1 Answers1