Découvrir Angular 2

Utiliser les formulaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Angular dispose d'un sous-framework de formulaire qui permet des actions intéressantes avec les champs et les erreurs. Découvrez comment l'utiliser.
08:37

Transcription

Je vais vous parler un peu des formulaires en Angular. C'est pas très compliqué, mais il y a des petites choses à faire. Il faut d'abord préparer le terrain. C'est vrai qu'on a déjà, plus ou moins, un formulaire. Pour le moment, il n'est ni complet ni fonctionnel. Avec Angular, vous avez la possibilité de contrôler votre formulaire, et ça, c'est génial. Il y a une sorte de framework de formulaire qui est implémenté. Bien sûr, il va d'abord falloir préparer et importer quelques classes qui ne sont pas d'origine dans votre installation d'Angular. On va faire un import from, comme ça, et on va chercher @angular/forms. Quand vous aurez utilisé, comme ça, l'import, vous pourrez lui demander d'importer deux choses. On a besoin de deux choses que l'on va référencer comme étant des dépendances complètes à notre projet. Je vais vous expliquer ça. On va d'abord devoir disable les deprecated forms. C'est important car ça va nous permettre d'avoir les dernières fonctionnalités des formulaires. Et on va avoir besoin de provideForms qui permet de rendre disponible le framework de formulaire dans votre application. Ensuite, vous avez un tableau qu'on a pas encore utilisé qui permet de définir des dépendances de façon globale sur votre projet, sur votre application en Angular. Donc on va activer le disable qui est une fonction, donc on va l'appeler. Et on va aussi activer le provide qui est également une fonction, et que l'on va référencer comme étant une fonction. Après avoir fait ça dans votre application, vous pouvez utiliser les formulaires. On va fermer ce fichier et on va travailler sur les formulaires. Il faut d'abord préparer le terrain. Pour que ça fonctionne, il faut une balise de formulaire sinon ça ne marchera pas, et il faudra référencer une variable qui sera interne, avec ce signe-là. Donc avec le #, on peut référencer une variable interne qu'on va utiliser ici, dans le templating. Il faut la caler sur le ngForm, je vous montre comment on fait. On dit d'abord que notre variable est itemForms, comme ça, et elle va être égale à ngForm. Vous verrez que, instantanément, notre application va un peu crasher. Vous fermez bien la balise ici. Vous allez indenter à cet endroit-là et essayer de recharger votre page. Ça fonctionne bien, ne vous inquiétez pas, le truc, c'est qu'on est obligé, quand on utilise le ngForm, de référencer, vous avez un exemple dans la console, un name pour chacun des champs, ce que l'on va faire tout de suite. On va référencer ici le name reference, on va ensuite référencer un name également qui sera, c'est un peu bidon, mais c'est comme ça, name, et enfin un dernier name, qui sera le state. Quand vous aurez fait ça, vous allez récupérer une application fonctionnelle, mais, on ne contrôle pas encore réellement le formulaire. Pour ça, il faudrait mettre des propriétés pour pouvoir afficher un message d'erreur, et pourquoi pas aussi bloquer notre bouton tant qu'on a pas rempli ce qui est demandé par rapport au formulaire à sa conception, on ne pourra pas valider. Alors pour référence, je vais lui mettre un minLength, donc un minimum de caractères à respecter, 5, et je vais dire qu'il est required. De même, je vais dire que le champ name est obligatoire, et enfin que le state est également obligatoire. Là, on commence à avoir quelque chose de bien. Par contre, notre bouton sera tout le temps activé. Ça m'embête un peu, je n'aimerais pas qu'il soit constamment activé, j'aimerais qu'il soit activé uniquement si tout est respecté. Pour faire ça, vous allez pouvoir utiliser une propriété, c'est la propriété disabled, une propriété HTML, et on va la câbler sur quelque chose, on va vérifier que le formulaire est valide. Comment on va faire ? On va simplement lui dire, itemForm.form.valid , si c'est valide, eh bien on va lui dire de ne pas disable le bouton. Ça ne marchera pas parce qu'il faut faire attention à inverser avec « ! ». Vous allez voir alors qu'on ne pourra pas cliquer sur le bouton. Comment faire pour pouvoir cliquer dessus ? Il faudra remplir exactement les conditions demandées, c'est-à-dire, avoir absolument tout de validé. Si tout n'est pas validé, comme ici, ça ne se voit pas très bien, mais là je ne peux pas cliquer, et là je peux cliquer sur mon bouton. Ceci est absolument obligatoire si l'on veut faire de la validation. Maintenant, j'aimerais faire s'afficher un message d'erreur quand je ne respecte pas ce qui est demandé. Vous allez pouvoir le faire aussi de façon assez simple, en ajoutant ici, pourquoi pas, un span, et ce span sera hidden ou pas, donc, hidden, comme ça. Si mon champ au-dessus respecte ou non les informations que je vais demander. Là je vais simplement référencer le span, et je vais dire « Champ incorrect », comme ça. Ou « Champ non valide », ce sera encore mieux. Et ici, je vais devoir, comme je l'ai fait pour itemForm, référencer une variable qui contient mon modèle pour qu'il puisse être exploité par Angular. C'est ce qu'on a fait ici, itemForm, on peut exploiter itemForm parce qu'on a référencé effectivement itemForm comme contenant la directive ngForm, et on peut donc avoir des comportements sur itemForm. Mais avant, on n'en avait pas. Donc là, c'est la même chose, il va falloir créer une variable reference qui est câblée sur ngModel, donc le modèle complet, qui va bien sûr avoir des propriétés. Comment on va faire ici ? Ça va être quoi ? Ça va être pareil. On va faire reference.valid. Si je fais ça ici, je vais avoir un message d'erreur. Vous voyez qu'ici, il s'affiche. Toujours la même chose. On inverse évidemment. Donc ce sera idem, si ce n'est pas valide. Je remplis, un, deux, puis je change de champs, trois, quatre... Ah là, on me dit que ce n'est pas bon. Là, ça s'affiche. Pourquoi ça s'affiche ? Parce que ça c'est bon, on peut le laisser comme ça. Ça va être à hidden si ce n'est pas valide, concrètement, parce que là, si c'est valide, ça se cache, et si c'est pas valide, ça s'affiche. Faites bien attention à ça, ce sont des subtilités particulières du code. Il y a encore un problème, j'aimerais bien qu'il s'affiche quand c'est pas valide. Là c'est pas le cas, ça s'affiche quand même au tout début. Comment faire ça ? En fait, ici on va ajouter « || reference.pristine ». Que veut dire pristine ? Ça veut dire qu'on n'est pas encore entré dans le champs. Le champ est pristine tant qu'on n'y est pas entré et qu'on n'a rien tapé. Dès qu'on tape quelque chose, il ne l'est plus. Là, ce n'est pas valide. Deux, trois, quatre, cinq caractères, ça devient valide, ça ne s'affiche plus. Vous avez plein de comportements qui existent. Bien sûr, on parlera à la fin de la documentation Angular. Je récapitule un peu pour les formulaires, que vous ayez un peu le fonctionnel et que vous compreniez. Bien sûr, on les active avec un import et une déclaration dans les dépendances globales de votre projet, on fait bien les deux, sinon ça ne marche pas. Puis, on se crée une balise form, sinon ça ne marchera pas. Enfin, dans la balise form, on référence de façon interne, qu'elle est câblée à ngForm, que ça correspond bien à itemForm sur ngForm. Ce qui nous permet d'avoir, avec le champ name, toutes les informations. On utilise ensuite des propriétés HTML entre crochets qu'on va activer ou non en fonction de quelque chose qui se passe dans le code. Là en l'occurrence, ce sera disabled tant que le form n'est pas valide. Ici, on utilise hidden si notre champ est valide puisqu'on veut cacher tant que c'est valide, et reference.pristine, donc notre champ n'a jamais été rempli pour le moment, c'est à hidden. Ça, c'est génial, pensez-y, vous pouvez l'utiliser avec n'importe quelle propriété HMTL existante, ça va marcher. Pensez aussi à placer des required sur les champs si le sont, sinon ça ne marchera pas, et pensez à utiliser toutes les propriétés que vous avez à disposition en HTML permettant de contrôler les champs, parce que c'est du HTML pur. Ce n'est donc pas compliqué à utiliser, mais il faut quand même respecter un peu du fonctionnel. Ce que vous pourriez aussi faire, c'est déplacer cet évènement-là si vous voulez, le mettre sur le form, à cet endroit-là, et donc ne pas référencer click, mais submit sur le formulaire, ça marche aussi, il n'y a pas de soucis. Voilà pour les formulaires, vous aurez encore beaucoup à apprendre pour les utiliser, mais vous avez déjà un aperçu de ce qu'on peut faire avec Angular et son framework de formulaire, qui est maintenant un composant à part qu'on vient importer et activer. Dernière chose, on n'a absolument rien touché au niveau de notre component parce que tout se fait entre le main, qui permet d'activer, et le template puisque tout se fait dedans quand il s'agit de formulaires, ça se passe entièrement dans le template, ce qui est génial en Angular.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :6 sept. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !