React antd form disable submit button

Question

How could I disable form submit button using antd

Form validations work, but I need to visually disable form submit button when validation fails

This is a stackblitz url https://stackblitz.com/edit/react-ts-z5d6tr?file=Hello.tsx

Answer 1

I found some elegant way to perform this

<Form.Item shouldUpdate className="submit">
  {() => (
    <Button
      type="primary"
      htmlType="submit"
      disabled={
        !form.isFieldsTouched(true) ||
        form.getFieldsError().filter(({ errors }) => errors.length)
          .length > 0
      }
    >
      Log in
    </Button>
  )}
</Form.Item>

Answer 2

I'm going to paste here my solution in case anyone finds it useful. Note; this solution uses the hook Form.useForm() and the callback onFieldsChange.

The validation is not included in this excerpt. But the idea is that when the form changes (any field) it will set the submit button (in this case inside the Modal) to disabled/enabled.

const LoginForm = () => {
  const [form] = useForm();
  const [disabledSave, setDisabledSave] = useState(true);
  
  const handleFormChange = () => {
    const hasErrors = form.getFieldsError().some(({ errors }) => errors.length);
    setDisabledSave(hasErrors);
  }
  
  return (
    <Modal okButtonProps={{ disabled: disabledSave }} onOk={form.submit}>
      <Form onFieldsChange={handleFormChange} form={form}>
        <Item name="username" label="username">
          <Input />
        </Item>
        <Item name="password" label="password">
          <Input />
        </Item>
      </Form>
    </Modal>
  )
};

Answer 3

I found a nice solution here that doesn't involve any additional state. If you wrap your submit button in a Form.Item like this, it should disable it until all required fields are completed. The rest of the form would remain the same.

<Form.Item
 noStyle
 shouldUpdate
>
  {({ getFieldsValue }) => {
    const { username, password } = getFieldsValue();
    const formIsComplete = !!username && !!password;
    return (
      <Button
         type="primary"
         htmlType="submit"
         disabled={!formIsComplete}
       >
         Log In
       </Button>
    );
  }}
</Form.Item>