How to use Antd InternalFormInstance to validate form without display of UI Errors-CodePudding

The bounty expires in 3 days. Answers to this question are eligible for a 50 reputation bounty. Mithun Shreevatsa is looking for a canonical answer:

Require a way to handle this, validation on load should happen for required fields only.

Looking for Update button to be also disabled when there are no changes.

Also it will be helpful if we have a custom validation associated as we have nested forms too inside this implementation.

Trying to disable the form submit button till the validation is fully passed.

This is something a old ask, i have come across the threads regarding this topic.

Below thread rised helps to trigger validation without display of UI errors: https://github.com/ant-design/ant-design/issues/25993

The below code works within the hoc of my footer button wrapper, but it is verifying for all fields to be touched and even applicable for non-required fields which is not right and expected.

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

Unfortunately, https://github.com/ant-design/ant-design/issues/23281 thread is full of chinese and i cannot understand.

My existing form.validateFields refers to formInstance, but it is referring to: InternalFormInstance.

How to import this and validate? Is it really supported in antd 4 version?

CodeSandbox link: https://codesandbox.io/s/gallant-merkle-21izz?file=/src/withFormWrapperHOC.tsx

Example code as a reference will be helpful!

The form validation miserably fails when select list is included. Form onChange or onChangeValues doesnt work, when we dig more the !form.isFieldsTouched(true) is always true even when there is no validation rule associated with Select List.

Ref ticket: https://github.com/ant-design/ant-design/issues/8436

It looks like Antd has some open issues with Rc-select api integrations and also which is not exposed.

Should we really consider Antd or any other form validation?

CodePudding user response：

It looks like there is a bunch of bugs in existing Antd library for this validation and this is not supported unless they officially announce with a release. There are open tickets and none have addressed.

I believe ill not find a solution for this question for now.