Génération de formulaire

incomplet

Schema de formulaire

Ces schemas sont des fichier json comprennant les informations des formulaire. Il y a les rêgles de validation du formulaire, mais aussi les informations de ces champs.

Ces informations serviront à la création du formulaire et de ses champs dans le DOM React ainsi que la validation des champs du formulaire

Structure

attribut	type	description
id	string	identifiant du formulaire
fields	array<Field>	les informations de chacun des champs du formulaire
rules	array<Validator>	les règles de validation du formulaires

Fields

Voici les informations que peuvent prendre un champs Fields:

attribut	type	description	obligatoire
id	string	l'identifiant du champs	x
name	string	le nom du champs	x
type	string	le type du champs
title	string	Texte du label qui s'affichera au dessus du champs
component	string	le composant react du champs (input, textarea, datepicker, select, cgu, fieldgroup, checkbox)	x
row	number	nombre de ligne du champs
value	string	valeur par défaut du champs
placeholder	string	placeholder
options	object	pour les component select, possibilitée de renseigner les options par un couple value et text
generate	object	pour les components select, possibilité de générer une suite d'options (placeholder, type, min, max)

Validator

Le validator provient directement du validator npm

Utilisation

Utiliser le composant FormWithValidation et lui ajouter ses props:

props	type	description
formData	object	Le schema du formulaire
onCancel	func	Action du clique de fermeture du formulaire (optionnel)
onSubmit	func	Action du clique d'envoie de formulaire et lorsque les informations entrées son en accord avec la validation (envoie la valeur des champs et la possibilité d'afficher un message d'erreur)

Exemple

<FormWithValidation
  formData={schemaContactUs}
  onCancel={closeModal}
  onSubmit={({ email, text }, reject) => {
    // todo: faire des choses avec les valeurs des champs email et text 
    // appeler reject si il y a une erreur pour pouvoir l'afficher à l'utilisateur
    Api.post('/mail/contact-us', { email, text })
      .then(nextStep)
      .catch(() => reject("Une erreur s'est produite"))
  }}
/>

Source

validator - npm