I run React with Ant Design and am getting this error:

Instance created by 'useForm' is not connect to any Form element. Forget to pass 'form' prop?

Code:

// .../services/index.js
export { default as registerService } from './registerService'


// .../services/registerService.js
import axios from '../../../configs/api.service'

const registerService = (form) => {
  return {
    validatePasswordAndConfirmPassword: async (rule, value) => {
      if (value && value !== form.getFieldValue(['user', 'confirmPassword'])) {
        throw new Error('Password and Confirm Password must be same')
      }
    },

    register: async user => {
      const { data } = await axios.post('/users', user)
      const { _id, username } = data
      console.log('Register Success:', `User ${username} is created, You get ID: ${_id}`)
      return data
    },
  }
}

export default registerService

// Register Component
import React from 'react'
import { Button, Form, Input } from 'antd'
import { registerService } from '../../services/'

const Register = () => {
  const [form] = Form.useForm()
  const service = registerService(form)

  const onFinish = async ({ user }) => {
    try {
      await service.register(user)
    } catch (err) {
      console.error('Register Failed:', err.response)
    }
  }

  const onFinishFailed = errorInfo => {
    console.error('Failed:', errorInfo)
  }

  return (
    <>
      <Form {...layout}
            name="Register"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            validateMessages={validateMessages}
      >
        <Form.Item
          name={['user', 'username']}
          label="Username"
          rules={[
            { required: true },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'password']}
          label="Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name={['user', 'confirmPassword']}
          label="Confirm Password"
          rules={[
            { required: true },
            {/*{ validator: service.validatePasswordAndConfirmPassword },*/}
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default Register

how can I fix this bug?

I run React with Ant Design and am getting this error:

Instance created by 'useForm' is not connect to any Form element. Forget to pass 'form' prop?

Code:

// .../services/index.js
export { default as registerService } from './registerService'


// .../services/registerService.js
import axios from '../../../configs/api.service'

const registerService = (form) => {
  return {
    validatePasswordAndConfirmPassword: async (rule, value) => {
      if (value && value !== form.getFieldValue(['user', 'confirmPassword'])) {
        throw new Error('Password and Confirm Password must be same')
      }
    },

    register: async user => {
      const { data } = await axios.post('/users', user)
      const { _id, username } = data
      console.log('Register Success:', `User ${username} is created, You get ID: ${_id}`)
      return data
    },
  }
}

export default registerService

// Register Component
import React from 'react'
import { Button, Form, Input } from 'antd'
import { registerService } from '../../services/'

const Register = () => {
  const [form] = Form.useForm()
  const service = registerService(form)

  const onFinish = async ({ user }) => {
    try {
      await service.register(user)
    } catch (err) {
      console.error('Register Failed:', err.response)
    }
  }

  const onFinishFailed = errorInfo => {
    console.error('Failed:', errorInfo)
  }

  return (
    <>
      <Form {...layout}
            name="Register"
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            validateMessages={validateMessages}
      >
        <Form.Item
          name={['user', 'username']}
          label="Username"
          rules={[
            { required: true },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'password']}
          label="Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name={['user', 'confirmPassword']}
          label="Confirm Password"
          rules={[
            { required: true },
            {/*{ validator: service.validatePasswordAndConfirmPassword },*/}
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
      </Form>
    </>
  )
}

export default Register

how can I fix this bug?

• javascript
• reactjs
• antd

• could you make a code sandbox ? – blueseal Commented Feb 29, 2020 at 15:22

1 Answer 1

Okay... I fixed it already

I just pass property form={form} into Form component. Like line 4

const [form] = Form.useForm()

<Form {...layout}
      form={form}
      name="Register"
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      validateMessages={validateMessages}
>
        <Form.Item
          name={['user', 'username']}
          label="Username"
          rules={[
            { required: true },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'password']}
          label="Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name={['user', 'confirmPassword']}
          label="Confirm Password"
          rules={[
            { required: true },
            { validator: service.validatePasswordAndConfirmPassword },
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">Submit</Button>
        </Form.Item>
</Form>