Frallen
Frallen

Reputation: 443

Antd 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

enter image description here

enter image description here

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

Upvotes: 1

Views: 912

Answers (1)

Frallen
Frallen

Reputation: 443

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**

Upvotes: 1

Related Questions