La gestion des formulaires est quelque chose de très important et très sensible. Il faut d'une part, récupérer les données des utilisateurs tout en les offrant une bonne expérience, mais aussi contrôler les information saisi par ces utilisateurs.

Dans ce tutoriel nous allons voir comment le faire avec les formulaire réactifs de angular.

C'est quoi le Reactiveform de angular

Les formulaires réactifs fournissent une approche basée sur un modèle pour gérer les entrées de formulaire dont les valeurs changent au fil du temps. Grâce au formulaire réactifs de angular, nous pouvons valider les données saisies par l'utilisateur avant de les envoyer dans une base de donnée pas exemple.

Intégration

L'intégration des formulaires réactifs dans ionic angular ne nécessite pas installer d'un plugin car directement embarqué avec angular. Donc pour l'intégrer la première étape c'est d'importer reactiveFormModule et le FormModule dans le fichier des modules de la page de votre application ou vous voulez gérer les modules.

Moi je vais le faire dans ma page register

Une fois ceci fait, nous allons créer un objet formGroup qui n'est rien d'autre que notre formulaire pour faire simple. Ce formualaire sera en suite construit par un object formBuilder.

• Importations nécessaires

• Création d'un object formGroup

• Construction de notre formGroup dans register.page.ts

Vous remarquez que dans la construction de notre formGroup, nous avons spécifié trois formControl ou trois champs : Email, Password, passwordVerification. Le Null du champs, représente la valeur par défaut, après la valeur par défaut, nous avons un tableau de validateur.

Grâce à Validator.required nous signifions que c'est champs sont requis. Grâce à Validator.minLenght Nous disons que ces champs contient une nombre minimal de caractère. Grâce à Validator.email on spécifie que c'est un champs de type email.

Le code global de notre page est le suivant :

Une fois notre formulaire construit dans notre fichier Typescript, nous allons l'ajouter à notre formulaire html.

Premièrement créons notre formulaire grâce au tags form html.

nous relions ce form tag avec notre objet formGroup grâce à l'attribut formGroup en utilisant une liaison par propriété. Nous avons également un événement ngSumit qui déclanche une méthode onSignUp lorsque nous allons cliquer sur le bouton de type submit de notre formulaire.

Ensuite nous allons créer nos champs en les liants au champs de notre object formGroup

Ici le plus important c'est formControlName cette attribut va nous permettre de lier notre input au champs email de notre object formGroup. Et nous allons faire pareil pour tous les champs de notre formulaire.

Le code finale de notre page html est le suivant :

ici le bouton de soumission ne sera valide que si les champs respectent les validateurs que nous avons défini.

Conclusion

Les reactiveForm de angular nous permet de donner à nos utilisateurs une meilleurs expérience utilisateurs et aussi nous aider à controler les différentes données fournies par l'utilisateur.