React - Disable button in Ant Design form until all required fields are filled

Question

I'm working with React and Ant Design form, and I have 6 input fields, where 3 of them are required. How can I disable the button until all 3 required fields are filled ?

I found a solution here but it's only working if there are no errors and not when all required fields are filled. So when I enter something in first input, it's enabling the button.

Form.js

const handleFormChange = () => {
    const hasErrors = form
      .getFieldsError()
      .some((field) => field.errors.length > 0);

    setDisabledSave(hasErrors);
  };


 return (
    <Drawer
      onClose={props.onClose}
      visible={props.isVisible}
      bodyStyle={{ paddingBottom: 80 }}
      extra={
        <Space>
          <Button onClick={props.onClose}>Cancel</Button>
          <Button
            type="primary"
            loading={props.isAdding}
            disabled={disabledSave}
            onClick={onSubmitHandler}
            htmlType="submit"
          >
            Submit
          </Button>
        </Space>
      }
    >
      <Form
        onFinish={onFinish}
        form={form}
        layout="vertical"
        onFieldsChange={handleFormChange}
      >
        <Row gutter={16}>
          <Col xs={24} sm={12}>
            <Form.Item
              name="name"
              label="Name"
              rules={[{ required: true, message: 'Name is required.' }]}
            >
              <Input placeholder="Enter name..." />
            </Form.Item>
          </Col>
          <Col xs={24} sm={12}>
            <Form.Item
              name="email"
              label="E-mail"
              rules={[
                { required: true, message: 'E-mail is required.' },
                { type: 'email', message: 'E-mail must be valid.' },
              ]}
            >
              <Input placeholder="Enter E-mail address..." />
            </Form.Item>
          </Col>
        </Row>
        {/*  other fields  */}
      </Form>
    </Drawer>
  );

Answer 1

Check the following example using onValuesChange method of Form component

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';

const Demo = () => {

  const [btndisabled, setbtndisabled] = useState(true);

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const onValuesChange = (changedValues, allValues) => {

    if ( allValues.username != undefined && allValues.password != undefined && allValues.username != '' && allValues.password != '') {
      setbtndisabled(false);
    } else {
      setbtndisabled(true);
    }
    console.log(allValues);
  };

  return (
    <Form
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onValuesChange={onValuesChange}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button disabled={btndisabled} type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Screenshot:

Before entering all values

After entering all values