logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.74k stars 1.26k forks source link

Make reactive meta.required #4623

Open hanzelkatomas opened 8 months ago

hanzelkatomas commented 8 months ago

Is your feature request related to a problem? Please describe. meta.required is working well, however if we use form, which toggles some other inputs on user input and we also have conditional validation, which makes these fields required using for example string().when("otherInput", { is: "value", then: (s) => s.required() }, then meta.required is initially false and value doesn't change, when validation schema make certain field as a required field.

Describe the solution you'd like I would like have meta.required value reactive, so when validation schema make some input required, then this value would change to true. This gonna help style all required inputs in form consistenly. We can use red "*" to indicate that field is required even when field have been toggled by some other user input.

Example:

https://codesandbox.io/p/devbox/interesting-turing-gpktlp In this example we indicate field is required by changing color of input's label to red. If we make "middle name" input required, by checking checkbox, then color doesn't change.

logaretm commented 8 months ago

We currently walk the tree of validations applied on each schema provider, this won't work for dynamic schemas. So a different approach might be needed here.

I will mark this as an enhancement till I get time to experiment with other approaches.

paul-louyot commented 4 months ago

The codesandbox linked above misses some dependencies, here is a working reproduction https://codesandbox.io/p/devbox/interesting-turing-forked-69v6jt

hanzelkatomas commented 4 months ago

The demo works, you have to just wait a bit.

By the way I noticed also another issue with this feature. When validation schema is not passed to vee-validate during setup the vee-validate will mark all the inputs as not required. And then passing validation schema to vee-validate later won't take effect. Couldn't vee-validate watch if validation schema changes? This unwanted behavior is present in multistep forms, where is some advanced logic (ie. when defineAsyncComponent is used).

logaretm commented 4 months ago

This is partially implemented if you use refs instead to build your schemas in c4415f8a5fdec3dcb377c4e1a67399a089ee9d4a. Or computed which is a valid alternative to using the lazy APIs.

Still there is no support for lazy type support, because there is simply no way to notify vee-validate of schema changes when it happens. We would have to figure it out whenever the field is validated, only then do we have an opportunity to re-check.

I will still need to consider it more to find a different approach to do it.