@metalsadman I tried to implement the Vuelidate-error-extractor, but with no luck. Here are the steps I made
- npm install vuelidate-error-extractor
- added plugin ‘vuelidate-error-extractor’ using quasar CLI and added it to the “plugins” section in quasar.conf after Vuelidate:
plugins: [
'i18n',
'axios',
'vuelidate',
'vuelidate-error-extractor'
]
Here is the content of vuelidate-error-extractor.js:
import VuelidateErrorExtractor, {templates} from 'vuelidate-error-extractor'
import FormGroup from '../components/FormGroup.vue'
import FormSummary from '../components/FormSummary.vue'
const messages = {
required: 'Field {attribute} is required',
email: 'Field {attribute} is not a proper email address',
maxLength: 'Field {attribute} exceeds maximum length.',
minLength: 'Field {attribute} requires minimum length.'
}
export default ({app, router, Vue}) => {
Vue.use(VuelidateErrorExtractor, {
messages,
attributes: {
name: 'Name',
email: 'Email',
text: 'Text',
username: 'Username',
password: 'Password',
firstName: 'First Name'
}
})
Vue.component('FormGroup', FormGroup)
Vue.component('FormSummary', FormSummary)
Vue.component('formWrapper', templates.FormWrapper)
}
FormGroup and FormSummary are the same (copy-paste) as the ones provided in https://codesandbox.io/s/q8pzo4q6kq . I don’t even use FormSummary for now
And here is my super simple RegisterForm
<template>
<form-wrapper :validator="$v.user">
<form-group label="Email"
name="email">
<q-input type="text"
v-model="user.email"
@blur="$v.user.email.$touch"/>
</form-group>
</form-wrapper>
</template>
<script>
import { required, minLength, maxLength } from 'vuelidate/lib/validators'
export default {
data () {
return {
user: {
email: ''
}
}
},
validations: {
user: {
email: { required, minLength: minLength(4), maxLength: maxLength(20) }
}
}
}
</script>
But after I enter the page I don’t get the input displayed and I see these errors in the browser:
[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.preferredValidator.$error')"
found in
---> <FormGroup> at src/components/FormGroup.vue
<FormWrapper>
<Register> at src/pages/Register.vue
<QPageContainer>
<QLayout>
<MyLayout> at src/layouts/MyLayout.vue
<App> at src/App.vue
<Root>
TypeError: undefined is not an object (evaluating 'this.preferredValidator.$error')
If I remove the form-wrapper like this the errors disappear.
<template>
<form-group :validator="$v.user.email" label="Email"
name="email">
<q-input type="text"
v-model="user.email"
@blur="$v.user.email.$touch"/>
</form-group>
</template>
but instead of the error message, below the input only ‘required’ or ‘minLength’ or ‘maxLength’ are displayed. In other words said, the keys are displayed, not the values (required: "Field {attribute} is required")
P.S. In the first example with form-wrapper I found out that if I remove the name attribute from form-group the error dissapears, but things don’t work as expected.
