Disable submit button if form is invalid, but maintain auto-validate behavior

[anqit]

When creating a submit button for a form, I would like to disable the button if the form is invalid. I check if formKey.currentState?.saveAndValidate() ?? false is true or not, and if not, I return null for the button callback. However, this runs on the first build, and I believe causes all of the error messages to appear for example on empty required fields. I would like for the error messages not to appear, and instead use the auto-validate mode of the form/fields. Is there a way to check the form validation without causing the error messages to render? Or is there another way to disable the button on an invalid form?

[deandreamatias]

Hi!
I think that you need split your use case in two parts:

• With empty form: Disabled your button by default
• With fill form (from initialValue or user input): When fill form with some or all value, call saveAndValidate and update button state to enable or disable, depending if form is valid. Also, can setup de autovalidateMode to best suit your needs.

Example:

1. Load page with FormBuilder. By default, your button is disabled and AutovalidateMode.disabled
2. Load initialValues to form. Usign setState, ValueNotifier or other state management
3. Verify form values
   3.1. If all fields are empty (thats means that your initialValue is empty too), the button still disabled
   3.2. If some field is filled, so call saveAndValidate() and update button state if is valid. Here can use the same state management solution that used before
4. In some point, need update setup to AutovalidateMode.onUserInteraction
5. Add a logic on FormBuilder.onChanged to update button state when user update the form.

I hope that this solved your question. Anyway, I have created the task #1490 to have an example with this use case, since it is very common

[anqit]

Appreciate the answer, thanks! Couple of follow ups:

• For your step 3.2, as soon as saveAndValidate() is called, won't that cause all of the error messages to appear, even if autoValidate is set to onUserInteraction or even disabled?
• Is there no way to check form validity without the form re-rendering or calling its own setState()?

[deandreamatias]

• Yes. I think that this is the point. You need advice the user in some way, not only disabled the button.
• Can use other state management (riverpod) or ValueNotifier.