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!
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>
);