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:

CodePudding user response：

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 )

CodePudding user response：

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