ant-design
ant-design copied to clipboard
ant-design
Form Provider should allow error handling and scrolling to first error
What problem does this feature solve?
In our case, we have a page with multiple sections and each section has a form in it. The page has an overall submit button that when clicked, should submit all the forms. If all forms successfully validate, we submit all the data to the server at once. If a single one fails, we need to scroll up to the first invalid field on the page. Most of these can be done through workarounds, but it would be nice if the Form Provider supported these.
What does the proposed API look like?
Form Provider could have the following additional props
- scrollToFirstError (boolean): scrolls to the first invalid field within the first invalid form.
- onFinishAll (function): gets called when all forms validate successfully upon submission.
- onFinishFailed (function): gets called when one of the forms fails to validate upon submission.
Maybe a Form Provider instance could be provided which would have the following properties
- submit (function): submits all forms within the form provider
- validateForms (function): validates all forms, but does not submit them
- reset (function): resets all fields within all forms
Sure. here's an example https://codesandbox.io/s/hungry-pond-hildoh?file=/src/App.js
Thanks for your example.
Seems it more like Form should provide a scoped validation ability since FormProvider should not take too deep into the form ability.
That's an option, but it goes beyond just validation. Each subform can be independently submitted or reset. And for the sake of accessibility, each subform may need to have its own form element in the DOM to work well with native form features (screen reader support, enter to submit, button with type=submit, etc).
btw, antd 5.8.6, when set scrollToFirstError, and once field error occurs, there will throw error in "useForm.js",
You should create a separate issue for that. It is unrelated to this one.