AntD Form return undefined

Question

I have a problem with antd form. Code below:

  const onFinish = (form: any) => {
      console.log("FORM: ", form);
      //{email: undefined, password: undefined, "": undefined}
  };


        <Form
          onFinish={onFinish}
          name="login"
          layout="vertical"
        >
          <Form.Item
            name="email"
          >
            <Typography>EMAIL</Typography>
            <Input />
          </Form.Item>

          <Form.Item
            name="password"
          >
            <Typography>PASSWORD</Typography>
            <Input type="password" />
          </Form.Item>

          <Form.Item>
            <Button htmlType="submit" className={styles.submitButton}>
              SIGN IN
            </Button>
          </Form.Item>
        </Form>

can someone tell me why on click on my BUTTON, antd return me from form only undefined values?

thanks for any help!

Answer 1

Because you haven't entered anything in the inputs. Add rules for inputs. Read more . For example:

const onFinish = (form: any) => {
    console.log("FORM: ", form);
  };

  return (
    <Form onFinish={onFinish} name="login" layout="vertical">
      <Form.Item
        name="email"
        label="Email"
        rules={[
          {
            required: true,
            message: "Please input your Email!"
          }
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="password"
        rules={[
          {
            required: true,
            message: "Please input your Password!"
          }
        ]}
      >
        <Input type="password" />
      </Form.Item>

      <Form.Item>
        <Button htmlType="submit">SIGN IN</Button>
      </Form.Item>
    </Form>
  );