Update antd form if initialValue is changed

Question

I'm passing currentUser data from my Redux-saga into antd form, Name, email, phone number, introduction are passed to the form as initialvalue, what i want to do is i want to submit the form as a put request to db if the initialvalue has been changed.. here is my code

import React  from 'react';
import {createStructuredSelector} from 'reselect';
import { connect } from 'react-redux';
import { selectCurrentUser } from '../../redux/user/user.selector';



import { Form, Input, Button } from 'antd';

import './profile_form.styles.css'

/* eslint-disable no-template-curly-in-string */
const ProfileForm = ({currentUser}) => {
  const {name, email} = currentUser


  const onFinish = values => {
    console.log(values);
  };

  const layout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 15,
    },
  };


  return (
    <Form className='profile-form' {...layout} 
    onFinish={onFinish}  
    initialValues={{ firstname: name, lastname: name, email: email }} 
    >
      <Form.Item
        name='firstname'
        label="First Name"
      >
        <Input  />
      </Form.Item> 
       <Form.Item
        name= 'lastname'
        label="Last Name"
      >
        <Input  value={name}/>
      </Form.Item>
      <Form.Item
        name='email'
        label="Email"

      >
        <Input value={email} />
      </Form.Item>
      <Form.Item name= 'phonenumber' label="Phone Number"
      >
        <Input />
      </Form.Item>
      <Form.Item name='introduction' label="Introduction"
      >
        <Input.TextArea />
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

const mapStateToProps = createStructuredSelector({
  currentUser:selectCurrentUser
})  

export default connect(mapStateToProps) (ProfileForm);

i found "onValuesChange" in antd api but have no idea how it's to be used.

score 48 · Answer 1 · answered Aug 29 '20 at 06:34

48

If you are using hooks you can add an useEffect with the code:

useEffect(() => {
 form.setFieldsValue(defaultValues)
}, [form, defaultValues])

Remember define the form value first:

const [form] = Form.useForm()

And remember to pass this form instance to the Form component:

<Form
    form={form}
    layout="vertical"
    name="form-name"
    initialValues={defaultValues}
    onFinish={submitHandler}
  >

In this form, you going to update the defaultValues when the component renders. If you are using classes, you can put the code inside componentDidUpdate lifecycle method.

Regards

answered Aug 29 '20 at 06:34

Julian Salamanca

722
6
6

For class components we can't use hooks, is there any workaround to that ? – adxl Jul 16 '21 at 13:34
1

@adxl https://stackoverflow.com/a/62960039/3673720 – Keytrap May 24 '22 at 13:18

score 1 · Answer 2 · answered Apr 25 '20 at 09:39

1

You can use componentdidupdate lifecycle method to compare the prev props and current props value to check whether the initial value is changed. If changed then make an api call to save in db. Hope this helps

answered Apr 25 '20 at 09:39

Pradeep Nair

34
3

score 1 · Answer 3 · answered Sep 17 '21 at 02:53

To be more precise, if you wanna set the default value, you could setFieldsValue at the beginning of useEffect Hook, and then use setFieldsValue again depends on a if condition statement.

Like below:

useEffect(() => {
    form.setFieldsValue({
        framework: '1',
        epoch: 1,
    });
    if (algorithms.length > 0) {
        form.setFieldsValue({
            framework: algorithms[0].framework,
            epoch: algorithms[0].epoch,
        });
    }
}, [form, algorithms]);

What really interesting is that I do not even need to set initialValues to component.

Hope this would help someone.

Update antd form if initialValue is changed

3 Answers3

Linked