CODEWITHSUNDEEP
javascriptreactjsformsvalidationantd
Mithun Shreevatsa
Mithun Shreevatsa

Reputation: 3599

form.validateFields() doesnt work when we have custom antd form component

Considering the following example, this is stopping us to create custom components inside forms using antd4 version.

const handleFormSubmit = () => {
  form
    .validateFields()
    .then((values: any) => {
      console.log('success values => ', JSON.stringify(values));
      successCallback(values);
    })
    .catch((errorInfo: any) => {
      console.log('failureCallback values => ', JSON.stringify(errorInfo));
      failureCallback(errorInfo);
    });
};


<Form
  form={form}
  layout="vertical"
  name="normal_login"
  className="login-form"
  initialValues={store.formData.initialValues}
>
  <Form.Item>
    <Input placeholder="Name" />
  </Form.Item>

  <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

This works absolutely fine, whereas if the component is custom, then it doesn't work. Example:

function CustomInput(props){
  return (
    <Form.Item>
      <Input placeholder={props.name} />
    </Form.Item>
  )
}

<Form
  form={form}
  layout="vertical"
  name="normal_login"
  className="login-form"
  initialValues={store.formData.initialValues}
>

  <CustomInput name="Name" />

Will display the field and also validates on change event. HandleFormSubmit is called, but it's not triggering success or failure block.

  <Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

What's wrong here?

Upvotes: 0

Views: 2639

Answers (1)

sushildlh
sushildlh

Reputation: 9056

Try this instead of your Custom JSX

function CustomInput(props){
  return (
    <Form.Item name={props.name}>  # Update this line only and remove this comment #
      <Input placeholder={props.name} />
    </Form.Item>
  )
}

<Form
  form={form}
  layout="vertical"
  name="normal_login"
  className="login-form"
  initialValues={store.formData.initialValues}
>

  <CustomInput name="Name" /> 

<Button type="primary" htmlType="submit" onClick={handleFormSubmit}>
    Create
  </Button>
</Form>

NOTE: In Antd if your using Form.Item then you have to set name there not on input fields. Form.Item assign its value to its Input.

I hope your doubt is solved comment for more views. I also tired of antd and wasted many days to understand this.

Upvotes: 1

Related Questions