Validation du champ Nir si submit avant de saisir une valeur

[bborlet]

Description

Le champs Nir ne peut plus etre validé une foit submit sans avoir été focus au préalable

Comment reproduire

Mettre un champ Nir dans un VForm vuetify, submit le form, editer le champ Nir, le form ne passe plus a l'état valide

Lors du premier submit j'ai ces message d'erreurs généré coté vuetify :

Donc input-11 c'est votre VInput custom et input 12 c'est le vtext-field qu'il y'a dedans

et le message affiché est différents c'est celui que vous géré en interne. Poruquoi ne pas utiliser ceux de vuetify ici ?

Ensuite je saisie une valeur dans le champ :

le message du vtext-field disparait bien, votre message custom aussi et le champs passe au vert, mais pour vuetify le champs est toujours en erreur a cause du errorMessage associé au vinput :/

Comportement attendu

Lors de l'edition du champs Nir apres un submit il devrait enlever tous les message d'erreurs

Environnement

• Librairie :@cnamts/synapse-bridge
• Version : 3.0.4

Priorisation

• Prioritaire

Projet

Gedi Pallier 1

Contacts

Benjamin Borlet

[DavidFyon]

Hello @bborlet, voici une solution :

<script lang="ts">
import NirField from '../src/patterns/NirField';
import { defineComponent } from 'vue';

export default defineComponent({
    components: {
        NirField,
    },
    data: () => ({
        isFormValid: false,
        value: null,
    }),
    methods: {
        submitForm() {
            if (this.$refs.form.validate()) {
                console.log('Form sent');
            }
        },
    },
});
</script>

<template>
    <VForm ref="form" v-model="isFormValid" @submit.prevent="submitForm">
        {{ isFormValid}}
        <NirField
            v-model="value"
            :nir-length="13"
            required
            @input="this.$refs.form.validate()"
        />
        <VBtn color="primary" :disabled="!isFormValid" @click="submitForm">Submit</VBtn>
    </VForm>
</template>

[bborlet]

Hello, pas convaincu que ce soit une bonne idée de revalider l’entierreté du Vform à chaque input sur le Nir :/ Particulièrement si le nir est défini dans un sous composant, dans ce cas je dois soit faire descendre la ref du vform jusqu'au Nir, soit faire bubble up l’input du nir jusqu’au composant contenant le form. Dans les deux cas, ce n'est pas une solution correct à un soucis interne à la validation du champ.

[DavidFyon]

Ok on regarde ce qu'on peux faire