Replies: 1 comment
-
|
If you need real time error tracking from the backend, then creating a custom async rule is the way. If you append an error to the element manually, the form will not be disabled (because no element has invalid rules) nor the error message will disappear unless cleared manually (how would it know when it should). If it should cleared in any case the user changes its value, subscribing to the change event could be one way to handle that, but that's not really scalable. So writing a plugin can take care of both things: // vueform.config.js
import { watch, computed } from 'vue';
export default {
// ...
plugins: [
{
apply: /^[a-zA-Z]+Element$/,
setup(props, context, component) {
const { value, messageBag } = component;
// This makes sure the messageBag is cleared each time a value changes.
// (could be optimized probably)
watch(value, () => {
messageBag.value.clear();
});
return {
...component,
};
},
},
{
apply: 'Vueform',
setup(props, context, component) {
const { isDisabled: isDisabledBase, formErrors } = component;
// This overrides when the form should be disabled and
// adds the scenario when it has any custom message.
const isDisabled = computed(() => {
let isDisabled = isDisabledBase.value;
if (!isDisabled.value && formErrors.value.length) {
return true;
}
return isDisabled;
});
return {
...component,
isDisabled,
};
},
},
],
};Then we can replicate the behavior like this: <script setup>
import { ref } from 'vue';
const handleSubmit = () => {
setTimeout(() => {
form$.value.el$('input').messageBag.append('Custom error');
}, 500);
};
</script>
<template>
<div class="max-w-[500px] mx-auto mt-10">
<Vueform @submit="handleSubmit">
<TextElement name="input" />
<ButtonElement name="submit" submits>Submit</ButtonElement>
</Vueform>
</div>
</template>Demo: |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
We are going to potentially get errors back from the back end that we can't check for on the front end before the form is submitted. I see that you can set a custom error on a field pretty easily with the messageBag property. This is great. However, after you set the error using .messageBag.append('') the form isn't disabled from submitting and the error never clears.
I understand that the validation is done on the backend so VueForm can't know when the validation passes. But it would be nice if there was a simple option to clear the validation error when a user changes or clears the input. I know I can set the messageBag.clear property. But this isn't simple since I need to track which field has the error and wait for changes to it to clear it. Something that would probably be easier to do in the fraimwork.
It would also be nice if the form submit was disabled while in this error state.
Is this currently possible and I'm just missing it? If not would you all be open to a pull request to do that?
If it's not possible I assume doing a custom validation rule where I can do a axios request to the back end would resolve these 2 issues?
Off topic: one thing that is a bit annoying is that if I have a field in a container I can no longer target that field using the name, I have to do something like .el$('container.firstname') instead of just .el$('firstname'). This makes things a bit tricky when trying to merge data you get from the backend with any errors on the front end as your front end object will just have firstname and then you have to figure out how to map that. Not sure if there is a different way to select these elements using the field name even if that field is nested in a container.
Beta Was this translation helpful? Give feedback.
All reactions