Questions concerning the new validation components

Versions:

• VueJs: 2.5.17
• Vee-Validate: 2.1.1

Description:

The new validation components make sense to me and I’m currently converting my code to use them. However I encountered some problems.

1. How to fill server side validation errors? This is what I’ve done before:

forEach(errors, (errs, key) => {
	const field = this.$validator.fields.find({ name: key, scope: this.$options.scope })
			
	if (field) {
		this.$validator.errors.add({
			id: field.id,
			field: key,
			msg: errs[0],
			scope: this.$options.scope
		})

		field.setFlags({
			invalid: true,
			valid: false,
			validated: true
		})
	}
})

1. I tried to use a ValidationObserver together with a ValidationProvider but got an error. Is that not possible and how should it be done?

<ValidationObserver ref="userData">
    <template slot-scope="{ invalid }">
        <ValidationProvider rules="required|alpha_num|min:3|max:16">
            <template slot-scope="{ errors }">
                <v-text-field
                    type="text"
                    name="username"
                    prepend-icon="person"
                    label="Nutzername"
                    color="primary"
                    v-model="username"
                    data-vv-as="Nutzername"
                    :error-messages="errors"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <ValidationProvider rules="required|email">
            <template slot-scope="{ errors }">
                <v-text-field
                    type="email"
                    name="email"
                    prepend-icon="email"
                    label="E-Mail Adresse"
                    color="primary"
                    v-model="email"
                    data-vv-as="E-Mail Adresse"
                    :error-messages="errors"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <ValidationProvider rules="required|min:8|max:72">
            <template slot-scope="{ errors }">
                <v-text-field
                    :type="showPassword ? 'text' : 'password'"
                    vid="password"
                    name="password"
                    prepend-icon="lock"
                    :append-icon="showPassword ? 'visibility_off' : 'visibility'"
                    label="Passwort"
                    color="primary"
                    v-model="password"
                    data-vv-as="Passwort"
                    :error-messages="errors"
                    @click:append="showPassword = !showPassword"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <ValidationProvider rules="required|confirmed:password">
            <template slot-scope="{ errors }">
                <v-text-field
                    :type="showPasswordConfirmation ? 'text' : 'password'"
                    name="password_confirmation"
                    prepend-icon="lock"
                    :append-icon="showPasswordConfirmation ? 'visibility_off' : 'visibility'"
                    label="Passwort wiederholen"
                    class="mb-3"
                    color="primary"
                    v-model="password_confirmation"
                    data-vv-as="Passwort wiederholen"
                    :error-messages="errors"
                    @click:append="showPasswordConfirmation = !showPasswordConfirmation"
                ></v-text-field>
            </template>
        </ValidationProvider>

        <v-btn color="primary" @click="preRegister" :disabled="invalid">
            Weiter
        </v-btn>
    </template>
</ValidationObserver>

1. Since vue 2.5.x it is possible to use the scoped-slot feature on other things than template. Would it be possible to do <ValidationProvider slot-scope="{ errors }"> to safe some lines?

[PoddukinVladimir]

@logaretm, how about use case when we have multiple ValidationProviders wrapped inside ValidationObserver, like this:

<ValidationObserver ref="observer">
           <form slot-scope="{ invalid }">
                <ValidationProvider rules="required">
                   <base-range-input v-model="field1" name="field1" label="Field1" min="0" max="10"
                                      slot-scope="{ errors }">
                        <span class="error-message">{{ errors[0] }}</span>
                    </base-range-input>
                </ValidationProvider>

                <ValidationProvider rules="required">
                    <base-range-input v-model="field2" name="field2" label="Field2" min="0" max="10"
                                      slot-scope="{ errors }">
                        <span class="error-message">{{ errors[0] }}</span>
                    </base-range-input>
                </ValidationProvider>

                <div class="text-center">
                    <button class="btn btn-default"
                            :class="{'disabled': invalid}"
                            @click.prevent="submitForm">Submit
                    </button>
                </div>
            </form>
</ValidationObserver>

Is there a way to programmatically add an error to a specific child in this case other than treat each one separately using specific ref attribute names and match them to api response name fields?

There also might be a situation with complex forms when having lots of nested components is inevitable and in this case using refs for each nested validation provider to place backend errors cannot be a solution.

I tried attaching custom error to observer’s ErrorBag, but it seems to have no effect

[logaretm]

Yep, everything is neatly packed with those components! some stuff remains to be ironed out.