Widget Formulaire

Le widget Formulaire est un composant conteneur puissant qui vous permet de créer des formulaires structurés avec plusieurs champs de saisie, des règles de validation et des options de mise en page avancées. Il sert de conteneur parent pour d'autres éléments de formulaire et fournit des capacités complètes de gestion de formulaire.

Aperçu​

Le widget Formulaire crée une mise en page de formulaire structurée utilisant un système de grille. Il peut contenir divers composants de saisie, gérer la validation et la soumission du formulaire. Le widget prend en charge différentes configurations d'écran, la visibilité conditionnelle et des règles de validation avancées.

Options de Configuration​

Paramètres Globaux​

Configuration de Base​

• Nom : Nom d'affichage pour le widget formulaire
• Variable/Modèle : Le modèle de données qui stockera les valeurs du formulaire (par ex., userForm, contactData)
• Formulaire : Créer une instance de formulaire distincte du formulaire principal de la page

Structure des Colonnes du Formulaire​

Le formulaire utilise un système de mise en page basé sur des colonnes où vous pouvez :

1. Ajouter des Colonnes : Créer de nouvelles colonnes avec des largeurs d'étendue spécifiques

2. Configurer les Points de Rupture Réactifs :

   • xs : Écrans extra petits
   • sm : Petits écrans
   • md : Écrans moyens
   • lg : Grands écrans
   • xl : Écrans extra larges

3. Glisser-Déposer : Réorganiser les colonnes en utilisant les poignées de glissement

4. Supprimer des Colonnes : Supprimer les colonnes inutiles

Configuration de la Validation​

Le widget formulaire prend en charge une validation complète sur différents écrans (vues/pages).

Validation Basée sur l'Écran​

Pour chaque écran de votre application, vous pouvez configurer :

• Disponible : Si le formulaire est disponible sur cet écran
• Visible : Contrôler la visibilité du formulaire avec des expressions booléennes ou conditionnelles
• Requis : Rendre les champs du formulaire obligatoires sur des écrans spécifiques
• Désactivé : Désactiver l'ensemble du formulaire sur certains écrans

Validation Avancée​

• Expressions Conditionnelles : Utiliser des expressions dynamiques pour la visibilité et la validation
  • Référencer d'autres champs du formulaire : {{fieldName}}
  • Utiliser des opérateurs de comparaison : {{age}} > 18
  • Conditions complexes : {{userType}} === 'admin' && {{status}} === 'active'

Configuration du Style​

Configuration de la Mise en Page​

• Position de l'Étiquette : Choisir comment les étiquettes sont positionnées par rapport aux champs de saisie

  • left : Les étiquettes apparaissent à gauche des champs de saisie
  • right : Les étiquettes apparaissent à droite des champs de saisie
  • top : Les étiquettes apparaissent au-dessus des champs de saisie

• Justification : Alignement horizontal des éléments du formulaire

  • start : Aligner au début
  • end : Aligner à la fin
  • center : Alignement centré
  • space-around : Distribuer avec de l'espace autour
  • space-between : Distribuer avec de l'espace entre

• Alignement : Alignement vertical des éléments du formulaire

  • top : Aligner en haut
  • middle : Centrer verticalement
  • bottom : Aligner en bas

• Ombré : Ajouter un effet d'ombre au formulaire

• Fixe : Rendre la position du formulaire fixe

• Réductible : Activer les sections de formulaire réductibles

Style de Base​

• Largeur : Définir la largeur du formulaire (pixels, pourcentages ou unités CSS)
• Hauteur : Définir la hauteur du formulaire
• Noms de Classe : Ajouter des classes CSS personnalisées pour le style
• Classes Dynamiques : Appliquer des classes en fonction de conditions

Options de Mise en Page​

• Mode de Mise en Page :
  • Block : Le formulaire occupe toute la largeur
  • Inline : Les éléments du formulaire s'affichent en ligne
• Bordure : Activer/désactiver la bordure du formulaire

Exemples d'Utilisation​

Formulaire de Contact de Base​

Formulaire Conditionnel​

Bonnes Pratiques​

Conception du Formulaire​

1. Regroupement Logique : Regrouper les champs liés dans la même colonne
2. Conception Réactive : Configurer des points de rupture appropriés pour différentes tailles d'écran
3. Étiquettes Claires : Utiliser des étiquettes descriptives pour les champs du formulaire
4. Retour de Validation : Fournir des messages d'erreur clairs

Performance​

1. Modèles Efficaces : Utiliser des noms de modèles spécifiques pour éviter les conflits de données
2. Chargement Conditionnel : Utiliser des conditions de visibilité pour charger les formulaires uniquement en cas de besoin
3. Imbrication Minimale : Éviter l'imbrication excessive des composants de formulaire

Expérience Utilisateur​

1. Divulgation Progressive : Utiliser la fonctionnalité de réduction pour les formulaires complexes
2. Hiérarchie Visuelle : Utiliser l'espacement et l'alignement pour guider l'attention de l'utilisateur
3. Retour d'Information : Fournir un retour de validation immédiat
4. Accessibilité : Assurer les associations d'étiquettes appropriées et la navigation au clavier

Gestion des Données​

1. Nommage Cohérent : Utiliser des conventions de nommage cohérentes pour les modèles
2. Stratégie de Validation : Implémenter à la fois la validation côté client et côté serveur
3. Gestion des Erreurs : Planifier une gestion et une récupération des erreurs élégantes

Implémentation Technique​

Structure du Composant​

Le widget formulaire génère un composant Vue.js qui :

• Gère l'état et la validation du formulaire
• Gère la communication entre composants imbriqués
• Fournit des capacités de liaison de données
• Prend en charge la génération dynamique de formulaires

Points d'Intégration​

• Composants Parents : Peut être intégré dans des pages, des popups ou d'autres conteneurs
• Composants Enfants : Contient et gère divers widgets de saisie
• Couche de Données : S'intègre avec le système de gestion des données de l'application
• Système de Validation : Se connecte au framework de validation de la plateforme

Cette documentation fournit un guide complet pour configurer et utiliser efficacement le widget Formulaire dans l'interface de votre application.