0
231
ViewsAntd with formik setFieldValue
There is a Antd table with data, when i click to button "Change", the entire line with data is passed to the function in the form of an object, now it remains to insert data into the fields, but I can't, what should I do?
How set data to antd input using outside function?
I can do it with .map (), but it seems more appropriate to me to use formik
const BankForm = (props) => {
const [form] = Form.useForm();
//show close form
const columns = [
...MY columns
{
title: "Действие",
key: "action",
fixed: "right",
render: (text, record) => (
<Space size="middle"
I clink to Button and all data of row go to ChangeBank(record)
<a onClick={() => ChangeBank(record)}> Изменить</a>
</Space>
),
},
];
const formik = useFormik({
initialValues: {
name_bank: "",
},
validate,
onSubmit: (values) => {
},
});
//my function to set data to form
let ChangeBank = (record) => {
formik.setFieldValue("name_bank", record.name_bank);
};
return (
<div className={clas.tableBlock_header}>
my form
<Form
form={form}
layout="vertical"
hideRequiredMark
onFinish={formik.handleSubmit}
>
<Form.Item
name="name_bank"
label="Название банка"
rules={[{ required: true, message: "Введите название банка" }]}
>
<Input value={formik.values.name_bank} name="name_bank" />
</Form.Item>
</Form>
);
};
·
Juan Pablo Isaza
1 answers
Answer question0
If you want to set values in antd form fields with formik, dont give the name Form.item
AND if you want use antd with formik, and you need validaite your inputs just download Yup. Dont use antd menthods. Yup with formik
<Form
form={form}
layout="vertical"
hideRequiredMark
onFinish={formik.handleSubmit}
>
<Form.Item
label="Название банка"
rules={[{ required: true, message: "Введите название банка" }]}
>
<Input value={formik.values.name_bank} name="name_bank" />
</Form.Item>
</Form>**strong text**
·
Juan Pablo Isaza
Report
Answer question