un Front en React: gérer les erreurs ( contraintes )

Version imprimable

27/10/2021, 19h10
Ushuango

un Front en React: gérer les erreurs ( contraintes )

Bonsoir,

lorsqu'on fait un formulaire de façon classique, on peut gérer les erreurs de validation,
avec les contraintes renseignées dans les entités ou dans un formBuilder !

Mais si mon formulaire est construit avec des composant React, peut-on encore se servir des ces contraintes renseignées ou bien faut-il tout refaire ?
Y a-t-il un moyen de les réutiliser ?
On passe par une requête ( une route de Symfony ) et la réponse devrait pouvoir contenir les erreurs qui seront passées ensuite dans un setState, non?
Mais comment récupérer ses erreurs: je voudrais faire le classique, mettre les messages d'erreur sous les champs concernés.

Bonne soirée,

Laurent.

oui on recupère les erreurs dnas la response envoyée par symfony par exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const handleSubmit = async (event) => {
        event.preventDefault();
        const apiErrors = {};
        try {
            await axios.post("/api/users", user);
            setErrors({});
            setMessage('Votre inscription a bien été prise en compte. Un email vient de vous être envoyer. Veuillez vous connecter')
            setTimeout(redirect,3000)
        } catch (error) {
            const {violations} = error.response.data;
            if (violations) {
                violations.forEach(violation => {
                    apiErrors[violation.propertyPath] = violation.message
                });
                setErrors(apiErrors);
                console.log('catch', errors)
            }
        }
    };

dans le catch tu vas pouvoir recupérer les constraints.
Mais cela n'empeche pas pour le confort de l'utilisateur de faire ces validation en front aussi

Bonjour, merci pour ta réponse:
j'ai avancé un peu, et je récupère les violations.
Mais j'ai des quelques problèmes:

- le try...catch ne fonctionne pas bien, si j'envoie un un champ vide pour une donnée, il n'y a pas d'erreurs ! (mais j'ai fait autrement )
- comment faire pour mettre ces erreurs sous les champs concernés ( je ne vois pas trop comment faire le setState avec apiErrors )

Voilà où j'en suis ( mon petit niveau ):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
insertAnimal = ev => {
        ev.preventDefault()
        fetch('/api/animals', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/ld+json'
            },
            body: JSON.stringify(this.state)
        })
        .then( response => {
            if (response.ok) {
                console.log('pas d\'erreurs: ',response.status)
                return response.json()
            } else {
                console.log('des erreurs: ', response.status)
                return response.json()
            }
        })
        .then(resp => {
            if (resp.violations) {
                console.log('violations')
                let apiErrors = {}
                const {violations} = resp
                violations.forEach( v => apiErrors[v.propertyPath] = v.message)
                console.log(apiErrors)
            }
        })
    }

Je peux pour l'instant , récupérer les violations sur des champs de l'entité "animals", j'ai du mal pour les autres champs: ce sont de relations dont je me sers pour rendre un select dans mon formulaire

02/11/2021, 19h14
Ushuango

Bonsoir,

j'ai réussi à faire ce que je voulais, avec la méthode que l'on ma expliqué ci-dessus, mais :

pas moye nde mettre une contrainte sur un champ avec une relation ManyTOMany !
J'ai vu cette documentation mais je ne suis pas sûr que ce soit la solution, en tous cas je ne doit pas m'y prendre correctement car ça ne fonctionne pas
03/11/2021, 11h38
armel18

Citation:

pas moye nde mettre une contrainte sur un champ avec une relation ManyTOMany !
J'ai vu cette documentation mais je ne suis pas sûr que ce soit la solution, en tous cas je ne doit pas m'y prendre correctement car ça ne fonctionne pas

C'est possible de valider une collection d'entités soit en utilisant l'annotation @Assert\Valid() qui va appliquer les contraintes de validation définies dans la classe de l'entité jointe,soit en utilisation l'annotation @Assert\Count(max="3", maxMessage="Veuillez sélectionner au moins 3 machins") qui va se contenter de vérifier le nombre d'items( exemples des cases à cocher) renseignés par l'utilisateur.

https://symfony.com/doc/current/refe...nts/Count.html
03/11/2021, 20h16
Ushuango

Oui, effectivement , j'avais pas pensé au CountEn plus, c'est exactement ce qu'il me fallait !

Merci pour tout, tout fonctionne comme il faut !