Is there an official way to toggle validateOnX field options on-the-fly?

[brendomaciel]

I'm using the useForm composable and I'm trying to achieve the following behavior:

• If there's a validation error, validate the field on input and model update
• Otherwise, only validate it on blur

Context

It gives a slight better UX when filling email fields, passwords with requirements etc.

When enabling validateOnInput/validateOnModelUpdate in an email field, for example, the user would see the validation error as soon as they start to type their email. Only after type approximately half of their email would make the error disappear.

The most obvious solution then is to disable these options and only use validateOnBlur, since by doing that it would trigger the validation only after the user leaves the field, therefore, having their full email filled in.

However, if there's an error after leaving the field, I would like to promptly hide the error as soon as the user solve the validation requirement. But for that, I would need to enable validateOnInput/validateOnModelUpdate again.

---

Actually, I managed to implement this behavior by doing that:

watch(email, () => {
    if (!errorBag.value?.email) {
        return;
    }
    
    validateField('email');
});

But I'd say it would be more intuitive and convenient if I could do something like that:

const [email, emailFieldProps] = defineField('email', {
    validateOnModelUpdate: computed(() => !!validator.errorBag.value?.email),
    validateOnInput: computed(() => !!validator.errorBag.value?.email),
    validateOnBlur: true,
});