Formulaires pilotés par modèle dans Angular

Name: Formulaires pilotés par modèle dans Angular
Author: Michaela Ochnich

Ce chapitre se concentre sur la création de formulaires pilotés par des modèles. Vous apprendrez à créer le modèle de formulaire et à le lier à un modèle de données. Vous découvrirez les états de contrôle d'Angular et comment les utiliser pour gérer la validation des formulaires et afficher des messages de retour d'erreur à l'utilisateur.

Preview the first lesson free — get full access to all 6 lessons.

Demander une démo Se connecter

Cours : à la demande

Cette leçon vous guidera tout au long de la configuration le modèle de votre formulaire basé sur un modèle. Pour cette démonstration, Je vais créer un simple formulaire d'inscription d'utilisateur. Tout d'abord, je vais générer un composant pour contenir le formulaire puis ajoutez ce composant à la racine, puis dans ce modèle racine, Je vais supprimer tout ce code de démarrage et ajoutez dans ce formulaire un composant. Désormais, lors de la création de formulaires basés sur des modèles, vous devez importer le FormsModule. Je vais donc le faire maintenant dans le module d'application racine. Ce FormsModule comprend tous les directives angulaires dont vous aurez besoin pour la construction, reliure et valider ce formulaire basé sur un modèle. NgModel et NgForm sont deux des directives que vous utiliserez qui font partie de ce module. NgModel est la directive utilisée pour la liaison bidirectionnelle et NgForm gérera la soumission du formulaire ainsi que fournir des informations de validation. Alors maintenant, avec ça importé, Je peux commencer à créer le modèle du formulaire. Donc, ouvrez ce modèle de composant de formulaire. Ce formulaire comprendra des champs pour un premier et nom et adresse e-mail, un mot de passe, un numéro de téléphone puis la possibilité de s'inscrire à une liste de diffusion. Les champs prénom, email et mot de passe seront obligatoires, mais alors les autres champs seront laissés facultatifs. Alors ici, je vais d'abord créer un formulaire, et puis ici, je rajouterai le champ pour le prénom et ici pour les champs de saisie, vous voudrez inclure à la fois les attributs d'ID et de nom. L'ID est utilisé pour faire correspondre l'entrée avec l'étiquette et Angular aura besoin de l'attribut name pour les directives NgModel et NgForm plus tard. je vais aussi pour styliser rapidement cette classe de groupe de formulaires avec une certaine marge pour que ces champs ne se superposent pas puis de nouveau dans le modèle de composant, je vais répéter ce code pour le reste des champs du formulaire, et pour ce champ email ici, Je me suis assuré que le type d'entrée est également e-mail pour que la validation requise par la suite fonctionne correctement pour ce domaine, et ici pour le champ email, vous voulez vous assurer que le type d'entrée est défini pour refléter qu'il s'agit d'une adresse e-mail pour que la validation fonctionne correctement. Je vais aussi faire la même chose pour les deux champs suivants, le mot de passe et le numéro de téléphone, et puis ce formulaire aura également besoin d'un bouton d'envoi puis en l'affichant dans le navigateur, tous ces champs sont configurés et affichés ici. C'est donc tout pour cette leçon sur la configuration du modèle et la prochaine leçon, nous allons vous montrer comment pour lier ce modèle à l'aide de NgModel.

Intermédiaire Fournisseur : Michaela Ochnich 6 leçons · 30m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce chapitre se concentrera sur la création de formulaires pilotés par des modèles. Vous apprendrez à créer le modèle de formulaire et à le lier à un modèle de données. Vous découvrirez les états de contrôle d’Angular et comment les utiliser pour gérer la validation des formulaires et afficher des messages de retour d’erreur à l’utilisateur. Ce chapitre couvrira également la soumission de formulaires.

Ce que vous allez apprendre

Créer un formulaire basé sur un modèle pour recueillir des informations auprès de l'utilisateur
Construire le modèle de formulaire et le lier à un modèle de données
Utiliser les états de contrôle d'Angular pour suivre le statut du formulaire et des entrées
Mettre en œuvre la validation de formulaire et afficher des messages d'erreur à l'utilisateur
Gérer la soumission du formulaire

Points clés à retenir

Le chapitre se concentre sur la création de formulaires basés sur des modèles dans Angular, y compris la création du modèle de formulaire et sa liaison à un modèle de données.
Les états de contrôle d'Angular peuvent être utilisés pour gérer la validation des formulaires et afficher des messages d'erreur à l'utilisateur.
Le chapitre couvre la soumission de formulaires dans le cadre du travail avec les formulaires basés sur des modèles.
La validation de formulaire est abordée dans deux leçons dédiées (Validation de formulaire parties 1 et 2).

Foire aux questions

Que couvre ce chapitre ?

Ce chapitre se concentre sur la création de formulaires basés sur des modèles dans Angular, incluant la création du modèle de formulaire, sa liaison à un modèle de données, l'utilisation d'états de contrôle, la gestion de la validation des formulaires avec des messages d'erreur et la soumission du formulaire.

Qu'est-ce que je vais apprendre à faire avec les formulaires ?

Vous apprendrez à créer un formulaire pour obtenir des informations de l'utilisateur et à gérer la validation et la soumission du formulaire.

Comment la validation de formulaire Angular est-elle enseignée dans ce chapitre ?

La validation des formulaires est traitée à travers les états de contrôle d'Angular, qui sont utilisés pour gérer la validation et afficher des messages d'erreur à l'utilisateur, et est divisée en deux leçons : Validation de formulaire partie 1 et Validation de formulaire partie 2.

Quelles leçons sont incluses dans ce chapitre ?

Les leçons sont la construction du modèle (Building the Template), la liaison du formulaire (Binding the Form), les états de contrôle (Control States), la validation de formulaire partie 1, la validation de formulaire partie 2, et la soumission de formulaire (Form Submission).

Quelles compétences ce chapitre concerne-t-il ?

Il concerne Angular (cadre Web), les composants Angular (Angular Components), les formulaires réactifs Angular (Angular Reactive Forms), l'interface utilisateur Angular (Angular UI), Ng Controller et les modèles (Templates).