Bonjour tout le monde.

Voilà, je suis en train de réaliser un formulaire via Formik avec validation YUP. Mon objet adress contient 4 champs différents (Rue, Code postal, Ville, Pays). Tout fonctionne bien. Sauf que, j'ai besoin que mon objet adress au final comporte Rue + Code postal + ville + pays car c'est envoyé vers une API de geocoding.

J'ai pas mal écumé le web, cherché plusieurs solution mais ca ne fonctionne pas. Sans Formik j'y arrive, mais si j'applique ce qui fonctionne sur un formulaire sans formik, ça me retourne une erreur avec formik. Du coup, si quelqu'un a une idée, je veux bien.

Merci d'avance.

    render() {
        return(
            <div id='form'>
            <h2>Ajout d'un Refuge</h2>
            <Formik
            initialValues={{
                name: '',
                logo: NoLogo,
                specializeAt: [],
                address:  {
                    street: '',
                    postalCode: '',
                    city: '',
                    land: 'France'
                },
                email: '',
                phone01: '',
                phone02: '',
                description: ''
            }}

            validationSchema={ Yup.object({
                name: Yup.string().required('Obligatoire'),
                logo: Yup.mixed(),
                specializeAt: Yup.array().required('Veuillez sélectionner, au moins, une spécialité'),
                address: Yup.object({
                    street: Yup.string().required('Obligatoire'),
                    postalCode: Yup.string().required('Obligatoire'),
                    city: Yup.string().required('Obligatoire'),
                    land: Yup.string().required('Obligatoire')
                }),
                email: Yup.string().email("Format d'adresse email invalide").required('Obligatoire'),
                phone01: Yup.string().required('Obligatoire'),
                phone02: Yup.string(),
                description: Yup.string().required('Obligatoire')
            })}

            onSubmit={(values, { setValues, setSubmitting }) => {
                alert("Submitting ..."); 
                console.log(values);
                setSubmitting(false);
            }}
            >
            {({ setFieldValue }) => (
                <Form>
                <label className='name' htmlFor='name'>Nom de l'Association/du Refuge</label>
                <Field className='name' name='name' placeholder='Refuge de Tata Monique'/>
                <ErrorMessage name='name'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <ImagePreview imagePreview={this.state.imagePreview}/>
                <label className='logo label' htmlFor='logo'>Logo/Image</label>
                <input className='logo input' name='logo' type='file' onChange={(event) => {
                    setFieldValue('logo', event.currentTarget.files[0]);
                    this.previewLogo(event);
                }} />

                <p>Spécialisé dans :</p>
                <div id='checkboxField' name='specializeAt'>
                <label className='check chien'>Chiens
                <Field className='check chien' type='checkbox' name='specializeAt' value='Chiens'/>
                </label>
                <label className='check chats'>Chats
                <Field className='check chats' type='checkbox' name='specializeAt' value='Chats'/>
                </label>
                <label className='check rongeurs'>Rongeurs
                <Field className='check rongeurs' type='checkbox' name='specializeAt' value='Rongeurs'/>
                </label>
                <label className='check reptiles'>Reptiles
                <Field className='check reptiles' type='checkbox' name='specializeAt' value='Reptiles'/>
                </label>
                <label className='check chevaux'>Chevaux
                <Field className='check chevaux' type='checkbox' name='specializeAt' value='Chevaux'/>
                </label>
                <label className='check animauxFerme'>Animaux de Ferme
                <Field className='check animauxFerme' type='checkbox' name='specializeAt' value='Animaux de Ferme'/>
                </label>
                <label className='check autres'>Autres
                <Field className='check autres' type='checkbox' name='specializeAt' value='Autres'/>
                </label>
                </div>
                <ErrorMessage name='specializeAt'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='street' htmlFor='street'>Rue</label>
                <Field className='street' name='address.street' placeholder='55 Rue du Faubourg Saint-Honoré'/>
                <ErrorMessage name='address.street'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='postalCode' htmlFor='postalCode'>Code Postal</label>
                <Field className='postalCode' name='address.postalCode' placeholder='75008'/>
                <ErrorMessage name='address.postalCode'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='city' htmlFor='city'>Ville</label>
                <Field className='city' name='address.city' placeholder='Paris'/>
                <ErrorMessage name='address.city'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='land' htmlFor='land'>Pays</label>
                <Field className='land' name='address.land' placeholder='France'/>
                <ErrorMessage name='address.land'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='email' htmlFor='email'>Email</label>
                <Field className='email' name='email' placeholder='tatamonique@mail.fr'/>
                <ErrorMessage name='email'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='phone01' htmlFor='phone01'>Téléphone 01</label>
                <Field className='phone01' name='phone01' placeholder='0123456789'/>
                <ErrorMessage name='phone01'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>

                <label className='phone02' htmlFor='phone02'>Téléphone 02</label>
                <Field className='phone02' name='phone02' placeholder='0123456789'/>

                <div id='description'>
                <label className='description' htmlFor='description'>Description</label>
                <Field className='description' name='description' as='textarea' placeholder='Un petit mot sur votre asso/refuge ?'/>
                <ErrorMessage name='description'>
                {errorMsg => <div className='error'>{errorMsg}</div>}
                </ErrorMessage>                            
                </div>

                <button type='submit'>Envoyer</button>
                </Form> 
                )}
                </Formik>
                </div>
                )
            }