How to dynamically disable the button of antd modal using button props

Question

I have an antd Modal, i am trying to validate a field and provided validation to it. How can i enable/disable the Ok button based on the validation. If the validation is successful then button should be enabled else disabled.

<Form>
    <Modal
      title={modalHeader}
      okText="ADD FIELD"
      cancelText="CANCEL"
      visible={visible}
      onCancel={onCancelHandler}
      onOk={() => onAddFieldHandler(fieldName)}
      width={600}
      okButtonProps={{disabled:true}}
    >
      <p>Please provide name</p>
      <Form.Item
      name="fieldName"
      rules={[{ required: true, message: 'Please enter name' }]}
      >
      <FieldNameInput
        placeholder="Field name..."
        value={fieldName}
        onChange={(event) => setFieldName(event.target.value)}

      />
      </Form.Item>
    </Modal>
    </Form>

Answer 1

You can use onFieldsChange from Antd Forms API togehter with geFieldsError and the okButtonProps from Antd Modal API.

  const [form] = Form.useForm();
  const [buttonDisabled, setButtonDisabled] = useState(true);
  return (
    <Modal
      ...
      okButtonProps={{ disabled:  buttonDisabled  }}
    >
     <Form
        form={form}
        ...
        onFieldsChange={() =>
          setButtonDisabled(
            form.getFieldsError().some((field) => field.errors.length > 0)
          )
        }
      >

Here is a working Stackblitz.

Answer 2

In my case I had Form inside modal and there is onFieldChange prop when you can pass function to perform some operations due to changes on from so you can sth like that:

const SomeModal = ({ visible }) => {
  const [form] = Form.useForm();
  const [buttonDisabled, setButtonDisabled] = useState(true);

  const handleOk = () => form.submit();

  const handleAfterClose = () => { 
    setButtonDisabled(true);
    form.resetFields();
  }

  const handleCancel = () => ...some action to hide modal;

  const handleFormFinish = (values) => {
    ... some logic here
  }

  return (
    <Modal
      title={"Some title..."}
      visible={visibile}
      onOk={handleOk}
      onCancel={handleCancel}
      afterClose={handleAfterClose}
      okButtonProps={{ disabled: buttonDisabled }}
    >
      <Form
        form={form}
        layout="vertical"
        name="acceptform"
        onFinish={handleFormFinish}
        initialValues={{
          ...initial values here
        }}
        onFieldsChange={() => {
          const actualFieldValues = form.getFieldsValue();
          const anyError = form.getFieldsError().some((field) => field.errors.length > 0);
          .. some logic if error etc..
          if (anyError) {
             setButtonDisabled(true);
          } 
          else {
             setButtonDisabled(false);
          }
      }}
    >

and of course there is need to have some validators on fields

<Form.Item
    label={"someLabel"}
    id="field"
    name="field"
    hasFeedback
    rules={[
    {
        type: "string",
        validator: async (rule, value) => inputFieldValidate(value, "custom message")
    },
  ]}
>

and validator looks alike:

const inputFieldValidate = async (value, message) => {
  if (someCondition)) {
    return Promise.reject(message);
  }
  return Promise.resolve();
};

here is some nice to know that validator isasync and to make it work without any warnings just handle promises