Créez un formulaire basique avec les template forms

Dans énormément d'applications web, une fonctionnalité essentielle est d'accepter de l'entrée utilisateur, généralement sous la forme de formulaires.

En Angular, il existe deux méthodes pour créer des formulaires : celle dite "template" et celle dite "réactive" :

• les formulaires template sont beaucoup plus simples et rapides à créer, et sont suffisants pour les cas où vous n'avez pas besoin de validation avancée ni de suivre en temps réel les entrées utilisateur

• les formulaires réactifs demandent plus de travail à implémenter, mais permettent un contrôle extrêmement fin, comme vous verrez dans les prochains chapitres

Dans ce chapitre, vous découvrirez les formulaires template.

Proposez une newsletter

Un cas d'usage parfait pour illustrer l'utilisation des template-driven forms est l'inscription à une newsletter.

Dans l'image ci-dessous, j'ai entouré en rouge la section de la landing page qui va nous intéresser pour ce chapitre :

Dans src/app/home/newsletter, ouvreznewsletter.component.ts  :

import { Component } from '@angular/core';

@Component({
  selector: 'app-newsletter',
  imports: [],
  styleUrls: ['./newsletter.component.scss'],
  template: `
		<section class="newsletter">
			<div class="newsletter-container">
				<h2>Stay Updated</h2>
				<p>Get the latest web development tips and tutorials in your inbox</p>
				<form class="newsletter-form">
					<input type="email" placeholder="Enter your email" required>
					<button type="submit">Subscribe</button>
				</form>
			</div>
		</section>
  `,
})
export class NewsletterComponent {

}

Jusqu'ici, rien de bien magique : c'est un formulaire tout à fait classique.

Préparez le component en y créant une variableuserEmail  qui contiendra la valeur entrée par l'utilisateur, ainsi qu'une méthodeonSubmit()  pour l'envoi du formulaire :

export class NewsletterComponent {
  userEmail: string = '';

  onSubmit(): void {
    console.log(this.userEmail);
  }
}

Comme vous pouvez le constater, la variableuserEmail  est une stringnormale. Pour la lier à la valeur de la balise<input>, vous allez utiliser une nouvelle directive – ngModel. Vous allez aussi ajouter un attributname, nécessaire pour qu'Angular puisse se lier auinput  :

<input type="email"
       name="userEmail"
       [(ngModel)]="userEmail" 
       placeholder="Enter your email" 
       required>

Alors, vous savez que l'attribute binding se passe avec les crochets[], et l'event binding avec les parenthèses(), mais là vous avez les deux en même temps ! Par conséquent, on trouve ce qui s'appelle le two-way binding, ou la liaison à double sens.

Le two-way binding lie totalement la valeur de la variable à la valeur du<input>. Si vous y attribuez une valeur depuis le TypeScript :

userEmail = 'me@my-house.com';

... dans le DOM :

Pour la liaison dans l'autre sens, il faut lier le bouton du formulaire à la méthodeonSubmit. Vous pouvez utiliser l'event binding avec(click), mais il y a une autre approche pour les formulaires. Dans la balise  <form>  :

<form (ngSubmit)="onSubmitForm()">

Modifiez l'adresse mail dans l'input, et cliquez sur le bouton :

Dans la console :

Visiblement, le two-way binding relie complètement la valeur de la variable à la valeur de l'input ! 

Captez le formulaire entier

Si votre formulaire commence à acquérir des champs supplémentaires, ça deviendra vite lourd et difficile à maintenir de récupérer systématiquement les valeurs de toutes les variables liées aux champs. Heureusement, Angular a pensé à vous !

Le système de formulaires template vous permet de passer le formulaire complet en argument comme NgForm. Modifiez d'abord l'empreinte deonSubmitForm()pour accepter le formulaire comme argument :

onSubmitForm(form: NgForm): void {
    console.log(form.value);
}

Le typeNgFormexpose un attributvaluequi correspond à un objet contenant les champs du formulaire avec leur attributnameet les valeurs contenues dans ces champs.

Pour récupérer leNgFormcorrespondant à votre formulaire, vous allez utiliser une référence locale :

<form #newsletterForm="ngForm"
      (ngSubmit)="onSubmit(newsletterForm)"
      class="newsletter-form">

Une référence locale, créée avec un dièse#comme ci-dessus, permet à Angular d'accéder à l'élément pour, par exemple, l'envoyer comme argument à une méthode comme vous le faites ici.

Maintenant, si vous cliquez sur le boutonSubscribe :

Pour bien montrer que la clé de l'objet qui est envoyé correspond à l'attributnamede l'élément  input, je vous propose de changer cet attribut et de répéter l'opération :

<input type="email"
       name="emailAddress"
       [(ngModel)]="userEmail"
       placeholder="Enter your email" 
       required>

De plus, pour bien voir que la forme de cet objet est dictée par le template, je vous propose de créer un deuxième input, de lui donner un nouveau nom, et de le lier à une nouvelle variable :

<input type="email"
       name="emailAddress"
       [(ngModel)]="userEmail"
       placeholder="Enter your email" 
       required>
<input type="email"
	   name="alternateEmailAddress"
	   [(ngModel)]="alternateEmail"
	   placeholder="Enter your email"
	   required>

userEmail: string = 'me@my-house.com';
alternateEmail: string = '';

Dans l'application vous avez :

Si vous y entrez une valeur et si vous cliquez sur Subscribe, ça donne :

Et voilà ! Vous savez maintenant utiliser les formulaires template pour demander des informations simples à vos utilisateurs.

Dans ce cas précis, vous affichez simplement la valeur reçue dans la console, mais on peut très bien imaginer appeler une méthode de service pour transmettre cette valeur au serveur.

À vous de jouer

Contexte

Vous souhaitez proposer un accompagnement customisé à vos utilisateurs : vous leur demandez donc leur niveau actuel afin de leur proposer les meilleurs cours.

Consigne

Placez-vous sur la branche chapitre-2/avant-activité  et vous verrez apparaître un nouveau component :SkillAssessmentComponent  .

Dans le template de ce component se trouve un formulaire avec un input de type radio et un bouton de type submit. Vous allez :

1. lier cet input à une variable - attention, même s'il y a plusieurs éléments input, ils correspondent à un seul champ de formulaire, il faudra donc lier les trois éléments à la même variable

2. capter la soumission du formulaire par l'utilisateur

3. afficher le contenu du formulaire dans la console (et pas seulement la valeur de la variable !)

Corrigé

En résumé

• Ajoutez FormsModule aux  importsde votre component pour débloquer les formulaires template ;

• Utilisez le two-way binding avec [(ngModel)]pour lier une variable au contenu d'un  input  ;

• Liez votre méthode d'envoi de formulaire au bouton de typesubmitavec l'événement  ngSubmit ;

• Envoyez le formulaire en entier avec une référence locale à la directivengFormet une méthode qui attend un argument de type NgForm– n'oubliez pas d'ajouter des attributsnameà tous vos  input!

Suivez-moi au chapitre suivant pour découvrir les formulaires réactifs et tout ce que nous pouvons faire avec eux !