💥 Breaking Changes
- remove the
disabledproperty from<Field>component anduseFieldfunction to avoid the many issues inv3and leave it up for userland to determine how a disabled field should behave.
The reasoning behind the removal is that it was hard to have a consistent behavior for disabled fields. Here is a few behaviors and the confusion around them:
Including/excluding their values in the submit handler, which means you have no access to the disabled field values which is natural yet limiting.
disabled fields are not necessarily valid, which means they affect the Form meta just like other fields. And people were confusing disabled with readonly and used disabled when they should've used readonly. Excluding them from the form meta means they are effectively invisible which would also prevent interaction with them using setTouched, setErrors.
So the decision to remove them was to keep the API simple and avoid having caveats that would invite confusion. Keeping it userland is better for everyone.
❓ FAQs
How do I prevent validation of my disabled field?
Instead of passing static strings/values to the rules prop, you can pass computed values that return empty string or object when the field is disabled, this will exclude your field from validation. yup also supports complex expressions using Yup.when so you can use that as well.
When I remove the rules for my disabled field, the field is marked as valid?
This is fine, you can still style your disabled field however you want, vee-validate just provides validation information, what you do with them is up to you at the end.
How do I omit disabled fields values from the submission handler?
Since you can probably track which fields are disabled you can use Object.keys coupled with filter or reduce to take out the values for the disabled fields, you can also use lodash.omit function which allows to do the same.