antd form field is not resetting for checkboxes

Question

I have a antd form that consists of input and checkboxes.

antd : 4.16.0 react : 17.0.2

After using,

this.formRef.current.resetFields();

the input fields are getting reset but not the checkboxes.

Sample Code:

<Form layout="vertical" hideRequiredMark initialValues={{ sunH: [ moment("00:00", "HH:mm"), moment("00:00", "HH:mm"), ], monH: [ moment("00:00", "HH:mm"), moment("00:00", "HH:mm"), ], }} ref={this.props.formRef} > <Row gutter={16}> <Col span={12}> <Form.Item name="pName" label="Name" rules={[ { required: true, message: "Please enter Name", }, ]} > <Input placeholder="Enter name" /> </Form.Item> <Form.Item name="Mon" label="" valuePropName="checked"> <Text>Mon</Text> </Form.Item> </Col> </Row> </Form>

the form takes in a onCancel props, so onCancel,

this.formRef.current.resetFields();

log of this.formRef.current:

add your form code, i only found the form.item code in the question — Sojin Antony
– Sojin Antony, Commented Oct 27, 2021 at 7:22

Sharif Himu · Accepted Answer · 2021-10-27 07:17:08Z

1

you can manually set radio fields value null in that function ...
all you have to do is ...

 formRef.setFieldsValue(['label_name(Mon)'] : undefined)

try formRef.current.setFieldsValue if you cant't change using upper code.
for functional component you have to take the form reference that is binding using useForm() and you have to call setfield method same.

form.setFieldsValue(['label_name(Mon)'] : undefined )

answered Oct 27, 2021 at 7:17

Sharif Himu

1262 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Sai Krishnadas Over a year ago

Is the syntax correct ? Im getting error

Sai Krishnadas Over a year ago

this.formRef.current.setFieldsValue(undefined); tried this, but still not clearing the checkboxes

Sharif Himu Over a year ago

can u give me a log of this.formRef.current ?

Sai Krishnadas Over a year ago

Added log in question

Sharif Himu Over a year ago

codesandbox.io/s/myform-forked-gix93 check the changes of your code here.

|

Sojin Antony · Accepted Answer · 2021-10-27 09:52:37Z

ant.design/components/form/#components-form-demo-nest-messages Check the second example, they have well explained everything you need there

https://codesandbox.io/s/form-methods-antd-4-17-0-alpha-7-forked-ff1uf?file=/index.js:0-2953

Check this working example with checkbox

import React from "react"; import ReactDOM from "react-dom"; import "antd/dist/antd.css"; import "./index.css"; import { Form, Input, Button, Select, Checkbox } from "antd"; const { Option } = Select; const layout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } }; const tailLayout = { wrapperCol: { offset: 8, span: 16 } }; const Demo = () => { const [form] = Form.useForm(); const onGenderChange = (value) => { switch (value) { case "male": form.setFieldsValue({ note: "Hi, man!" }); return; case "female": form.setFieldsValue({ note: "Hi, lady!" }); return; case "other": form.setFieldsValue({ note: "Hi there!" }); } }; const onFinish = (values) => { console.log(values); }; const onReset = () => { form.resetFields(); }; const onFill = () => { form.setFieldsValue({ note: "Hello world!", gender: "male" }); }; return ( <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}> <Form.Item name="note" label="Note" rules={[ { required: true } ]} > <Input /> </Form.Item> <Form.Item name="gender" label="Gender" rules={[ { required: true } ]} > <Select placeholder="Select a option and change input text above" onChange={onGenderChange} allowClear > <Option value="male">male</Option> <Option value="female">female</Option> <Option value="other">other</Option> </Select> </Form.Item> <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender } > {({ getFieldValue }) => getFieldValue("gender") === "other" ? ( <Form.Item name="customizeGender" label="Customize Gender" rules={[ { required: true } ]} > <Input /> </Form.Item> ) : null } </Form.Item> <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }} > <Checkbox>Remember me</Checkbox> </Form.Item> <Form.Item {...tailLayout}> <Button type="primary" htmlType="submit"> Submit </Button> <Button htmlType="button" onClick={onReset}> Reset </Button> <Button type="link" htmlType="button" onClick={onFill}> Fill form </Button> </Form.Item> </Form> ); };

Nope, the second example doesn't have a checkbox field. My issue is with checkbox field , not the input field.
I have updated the answer with a sandbox example with checkbox, check this codesandbox.io/s/…
I'm using class based components , so useForm() hook doesn't help.
You are using the latest react version right, so the functional component will work perfectly in your project. also React is preferring to use functional components if you are using latest react version
Yeah, But this is a ongoing project where there is already tons of lines of code written, Changing them for a form would be hectic

Collectives™ on Stack Overflow

antd form field is not resetting for checkboxes

2 Answers 2

12 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

5 Comments

Related