J'ai un formulaire où certains champs sont à l'intérieur d'objets :
<script setup lang="ts"> ... const schema: yup.SchemaOf<any> = yup.object({ group: yup.string().nullable().required(), description: yup.string().nullable().required(), user: yup .object({ first_name: yup.string().required(), last_name: yup.string().required(), }) .required(), }) const { errors, handleSubmit, isSubmitting } = useForm({ validationSchema: schema, initialValues: { group: '', description: '', user: {} }, }); const { value: group } = useField<string>('group'); const { value: description } = useField<string>('description'); const { value: user } = useField<any>('user'); const isValid = useIsFormValid(); ... </script> <template> <div> <label for="group">Group:</label ><input id="group" v-model="group" type="text" /> </div> <div> <label for="description">Description:</label ><input id="description" v-model="description" type="text" /> </div> <div> <label for="first-name">First name</label ><input id="first-name" v-model="user.first_name" type="text" /> </div> <div> <label for="last-name">Last name</label ><input id="last-name" v-model="user.last_name" type="text" /> </div> <button :disabled="!isValid">Save</button> ... </template>
Mais la validation des données de cet objet n'est considérée comme valide que lorsque ses champs externes sont modifiés, c'est-à-dire remplis. group
, description
, first_name
, last_name
(按相同顺序),并且表单不会仅当您再次编辑 group
或 description
Voici le lien vers le code complet.
J'utilise la version suivante :
"vue":"^3.2.37", "vee-validate": "^4.5.11", "yup": "^0.32.11"
Lorsque vous utilisez useField() avec un objet, les propriétés imbriquées perdront leurs connexions réactives. Voici donc deux options pour résoudre ce problème : enveloppez useField avec reactive() ou utilisez useField() distinct pour chaque propriété imbriquée.
Option 1
Option 2
Voici un exemple fonctionnel Ici