How to Reset Form after Submit in ReactJS using Ant Design Form Component | Clear Form ReactJS

#reactjs #antd #form #clearfield
In this video tutorial I have explained how to reset form after submit in ReactJS using Ant Design Form Component and how to reset Form to initial values or clear form fields programmatically.
This video focuses on
- How to reset form after submit in ReactJS using Ant Design Form Component
- How to reset Form to initial values in reactJS
- How or clear form fields programmatically using antd form
- How to clear form after submit in antd form reactjs
- How to pre populate form with initial values in reactjs
- How to add submit button in ant design form ui
- How to add reset button in ant design form ui
- How to add clear button in ant design form ui
- How to reference antd form using Form.useForm() hook
- How to use form resetFields function to reset form fields in javascript
- How to use form setFieldsValue function to set form fields values programmatically in reactjs
- How to show loading or spinning on submit form in reactjs
- How to create form in reactjs using ant design form component
- How to set valuePropName for checkbox inside antd form using reactJS app
- How to use state to show loading on antd form component in reactJS
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
In this video we will be using different available props of Form component to see the possibilities for different use-cases. I have created an intro video on that at • Ant Design Form compon... , please go through that as well if you have not used ant form before.
For more details on how to add form validation and rules please go through following video • How to Create and Vali...
For more details on ant-design, please visit its documentation at ant.design/components/overview/
Happy Coding!

[@hakan126]

i always have to come back to this tutorial. such a masterpiece

[@CodeWithAamir]

Glad to hear 🎉
Thank you @Hakan

[@testingaccount5867]

So Ant design 5.0 is released! yay!

[@CodeWithAamir]

Yes @Testing Account, very exited on that!
I am compiling a video on what's new in Ant Design 5.0 and later on will create videos on new components introduced in Antd5. Just stay tuned.
Hopefully you will enjoy those updates.
Thanks

[@user-hb6jr5qi7q]

thank sir

[@sagar5547]

I used input upload component and how to do not show or clear preview photo after submitting the form??

[@CodeWithAamir]

Hi,
You can use the showUploadList prop like
to hide its preview completely.
or you can make it based on a variable so you can hide it after submitting like
I hope you got the idea, please let me know in case of any question
Thank you !

[@nottoday1112]

Hi this is not working in my case
My Form component is wraped inside Drawer component
Any other solutions?

[@CodeWithAamir]

Hi, Wrapping inside drawer should not have any issues, can you please share your code snippet so I can check and see the issue.
Thanks

[@testingaccount5867]

Most of the times i need to get the values from the remote server and show them as the initial values but that doesn't seem to be working correctly. either when the loading is false then i load the whole form but this hack is messing my whole layout. is there any solution to be the initial values?

[@CodeWithAamir]

Hi @Testing Account,
The initial values work for the very first time the Form is created. In your case it looks like while you are waiting for server response, the Form has already been rendered.
So the solution is either you do not render the form while loading and you are correct it might mess with layout because it will render null/empty.
The other way is you can render the form even while loading Api so it does not mess up the UI and once you have the initial values from Api then you can set them by using form.setFieldsValue function as used in this video.
Hope it helped.
Please let me know if you need any more help on this.
Thanks

[@testingaccount5867]

@@CodeWithAamir thank you so I see I have to manually load the fields one by one after the api is loaded. I was getting used to the less code by ant design. I love it so far that you don't have to set the form values at all and it handles everything by itself.

[@CodeWithAamir]

Hi @Testing Account,
If the keys in Api response json are same as the name in Form.Item then you do no need to set one by one you can just call the form.setFeildsValue() and it should assign to appropriate form controls accordingly and automatically.
Thanks

[@testingaccount5867]

@@CodeWithAamir great, i will check that out.

[@testingaccount5867]

@@CodeWithAamir here is the code which i have tried but doesn't seem to be working.
const UpdateProfileInformation = () => {
const [form] = Form.useForm();
const navigate = useNavigate();

useEffect(() => {
loadProfile()
}, [])
const loadProfile = async () => {
await profileService.getProfile().then((res) => {
form.setFeildsValue(res)
})
}
const onFinish = async (values) => {
profileService.updateProfile(values);
message.success('Information updated successfully');
navigate('/dashboard');
};
render (

this is where whole form loads and form items names and json response fields names are the same but doesn't load

)