CODEWITHSUNDEEP
reactjsantd
Sai Krishnadas
Sai Krishnadas

Reputation: 3409

antd form field is not resetting for checkboxes

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:

enter image description here

Upvotes: 0

Views: 2421

Answers (2)

Sojin Antony
Sojin Antony

Reputation: 2217

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

Upvotes: 1

Sharif Himu
Sharif Himu

Reputation: 126

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 )

Upvotes: 1

Related Questions