Formulaires Angular 2

Dans ce chapitre, nous allons présenter comment créer un formulaire Angular à l'aide de composants et de modèles.

En utilisant les modèles Angular, nous pouvons créer divers types de formulaires, tels que des formulaires de connexion, des formulaires de contact, des formulaires de détail de produit, etc., et nous pouvons également ajouter une validation des données aux champs de ces formulaires.

Ensuite, nous allons implémenter la fonctionnalité du formulaire étape par étape.

Créer le projet

Importez le projet initial.

Pour la création complète du projet, reportez-vous à :Configuration de l'environnement Angular 2 TypeScript

Ou téléchargez directement le code source : Cliquez ici pour télécharger

Après extraction, renommez le répertoire en angular-forms et modifiez ce qui suit dans le fichier angular-forms/package.json :"name": "angular-quickstart"en"name": "angular-forms"。

Une fois terminé, nous exécutonscnpm installpour charger les paquets de dépendances.

Créer le modèle Site

Ce qui suit crée une simple classe de modèle Site, contenant trois champs obligatoires : id, name, url, et un champ facultatif : alexa.

Créez le fichier site.ts dans le répertoire angular-forms/app, avec le code suivant :

Fichier app/site.ts :

export class Site { constructor( public id: number, public name: string, public url: string, public alexa?: number ) { } }

Dans le code suivant, les champs marqués comme public sont des champs publics, et un point d'interrogation (?) ajouté après alexa indique un champ facultatif.

Créer un composant de formulaire

Chaque formulaire Angular se compose de deux parties : un template basé sur HTML et un composant basé sur du code, qui gère les données et l'interaction utilisateur.

Créez le fichier site-form.component.ts dans le répertoire angular-forms/app, avec le code suivant :

fichier app/site-form.component.ts :

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ moduleId: module.id, selector: 'site-form', templateUrl: 'site-form.component.html' }) export class SiteFormComponent { urls = ['www.example.com', 'www.google.com', 'www.taobao.com', 'www.facebook.com']; model = new Site(1, 'Example', this.urls[0], 10000); submitted = false; onSubmit() { this.submitted = true; } //TODO: À supprimer une fois terminé get diagnostic() { return JSON.stringify(this.model); } }

Dans l'exemple, le décorateur Component et le modèle Site sont importés.

Le sélecteur @Component "site-form" signifie que nous pouvons utiliser une balise<site-form>pour insérer ce formulaire dans le template parent.

La propriété templateUrl pointe vers un fichier modèle HTML autonome nommé site-form.component.html.

La propriété diagnostic est utilisée pour renvoyer la forme JSON de ce modèle.

Définir le module racine de l'application

Modifiez app.module.ts pour définir le module racine de l'application, qui spécifie les références externes et déclare les composants qui appartiennent à ce module, tels que SiteFormComponent.

Comme les formulaires pilotés par le template ont leur propre module, nous devons ajouter FormsModule au tableau imports de l'application afin de pouvoir utiliser les formulaires.

Le code du fichier app/app.module.ts est le suivant :

Le fichier app/app.module.ts :

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { SiteFormComponent } from './site-form.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, SiteFormComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Créer le composant racine

Modifier le fichier du composant racine app.component.ts pour y placer SiteFormComponent.

fichier app/app.component.ts :

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<site-form></site-form>' }) export class AppComponent { }

Créer un modèle initial de formulaire HTML

Créer le fichier de modèle site-form.component.html, avec le code comme indiqué ci-dessous :

fichier app/site-form.component.html :

<div class="container"> <h1>Formulaire de site Web</h1> <form> <div class="form-group"> <label for="name">Nom du site Web</label> <input type="text" class="form-control" id="name" required> </div> <div class="form-group"> <label for="alexa">Classement Alexa</label> <input type="text" class="form-control" id="alexa"> </div> <button type="submit" class="btn btn-default">Envoyer</button> </form> </div>

L'attribut required rend le champ obligatoire ; s'il n'est pas défini, il est facultatif.

Saisissez la commande suivante dans le répertoire angular-forms :

cnpm install bootstrap --save

Ouvrez le fichier index.html et ajoutez les liens de style suivants dans la section <head> :

Exécuteznpm startPuis visitez : http://localhost:3000/, la sortie est la suivante :

Utilisez ngModel pour la liaison de données bidirectionnelle

Ensuite, nous utilisons ngModel pour la liaison de données bidirectionnelle, et mettons à jour les propriétés du composant en écoutant les événements DOM.

Modifiez app/site-form.component.html pour lier notre formulaire au modèle à l'aide de ngModel. Le code est présenté ci-dessous :

fichier app/site-form.component.html :

<div class="container"> <h1>Formulaire de site Web</h1> <forme> {{diagnostic}} <div class="form-group"> <label for="name">Nom du site Web</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> </div> <div class="form-group"> <label for="alexa">Classement Alexa</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">URL du site Web</label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default">button</form> </div> </div>

Chaque élément input a un attribut id, qui est utilisé par l'attribut for de l'élément label pour associer le label à l'input correspondant.
Chaque élément input a un attribut name, dont le module forms d'Angular a besoin pour enregistrer le contrôle pour le formulaire.

Exécutez l'exemple ci-dessus ; le résultat de sortie est le suivant :

{{diagnostic}} Il est uniquement utilisé pour afficher des données lors des tests.

Nous pouvons également utiliser ngModel pour suivre l'état de modification et la validation de validité. Il utilise trois classes CSS pour mettre à jour les contrôles afin de refléter l'état actuel.

State	Classe lorsque vrai	Classe lorsque faux
Le contrôle a été visité	`ng-touched`	`ng-untouched`
La valeur du contrôle a changé	`ng-dirty`	`ng-pristine`
La valeur du contrôle est valide	`ng-valid`	`ng-invalid`

De cette façon, nous pouvons ajouter du CSS personnalisé pour refléter l'état du formulaire.

Créez le fichier forms.css dans le répertoire angular-forms. Le code est le suivant :

fichier forms.css :

.ng-valid[required], .ng-valid.required { border-left: 5px solid #4276A9; /* green */ } .ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ }

Ouvrez le fichier index.html et ajoutez les liens de style suivants dans la section <head> :

Modifiez app/site-form.component.html. Le code est présenté ci-dessous :

fichier app/site-form.component.html :

<div class="container"> <h1>Formulaire de site Web</h1> <forme> {{diagnostic}} <div class="form-group"> <label for="name">Nom du site Web</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger">Le nom du site web est requis</div> </div> <div class="form-group"> <label for="alexa">Classement Alexa</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">URL du site Web</label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default">button</form> </div> </div>

Dans le template, en liant l'attribut hidden de l'élément div aux propriétés du contrôle name, nous pouvons contrôler la visibilité du message d'erreur pour le champ « name ».

Supprimez les données dans le champ name, et le résultat affiché est le suivant :

Ajouter un site web
Ensuite, nous créons un formulaire pour ajouter un site web. Ajoutez un bouton dans app/site-form.component.html :

fichier app/site-form.component.html :

<button type="button" class="btn btn-default" (click)="newSite()">Ajouter un site web</button>

Liez l'événement du bouton ci-dessus à une méthode du composant :

fichier app/site-form.component.ts :

active = true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active = true, 0); }

Nous ajoutons un indicateur active au composant et l'initialisons à true. Lorsque nous ajoutons un nouveau site web, il définit l'indicateur active sur false, puis le remet rapidement à true via une fonction setTimeout rapide.

Soumettre le formulaire via ngSubmit

Nous pouvons utiliser la directive NgSubmit d'Angular pour soumettre le formulaire et le lier à la méthode SiteFormComponent.submit() via le mécanisme de liaison d'événements.

Nous avons défini une variable de référence de modèle #siteForm et l'avons initialisée à "ngForm".

Cette variable siteForm fait maintenant référence à la directive NgForm, qui représente le formulaire dans son ensemble.

Le code complet du fichier site-form.component.ts est le suivant :

fichier app/site-form.component.ts :

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ moduleId: module.id, selector: 'site-form', templateUrl: 'site-form.component.html' }) export class SiteFormComponent { urls = ['www.example.com', 'www.google.com', 'www.taobao.com', 'www.facebook.com']; model = new Site(1, 'Tutoriel d'exemple', this.urls[0], 10000); submitted = false; onSubmit() { this.submitted = true; } //TODO : à supprimer une fois terminé get diagnostic() { return JSON.stringify(this.model); } active = true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active = true, 0); } }

app/site-form.component.html Le code complet est le suivant :

fichier app/site-form.component.html :

<div class="container"> <div [hidden]="submitted"> <h1>Formulaire de site Web</h1> <form *ngIf="active" (ngSubmit)="onSubmit()" #siteForm="ngForm"> {{diagnostic}} <div class="form-group"> <label for="name">Nom du site Web</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger">Le nom du site web est requis</div> </div> <div class="form-group"> <label for="alexa">Classement Alexa</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">URL du site Web</label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default" [disabled]="!siteForm.form.valid">Soumettre</button> <button type="button" class="btn btn-default" (click)="newSite()">Ajouter un site Web</button> </form> </div> <div [hidden]="!submitted"> <h2>Les informations que vous avez soumises sont les suivantes :</h2> <div class="row"> <div class="col-xs-3">Nom du site Web</div> <div class="col-xs-9 pull-left">{{ model.name }}</div> </div> <div class="row"> <div class="col-xs-3">Classement Alexa du site Web</div> <div class="col-xs-9 pull-left">{{ model.alexa }}</div> </div> <div class="row"> <div class="col-xs-3">URL du site Web</div> <div class="col-xs-9 pull-left">{{ model.url }}</div> </div> <br> <button class="btn btn-default" (click)="submitted=false">Edit</button> </div> </div>

Dans le template, nous lions l'attribut hidden à la propriété SiteFormComponent.submitted.

Le formulaire principal est visible dès le début car la propriété submitted est false. Lorsque nous soumettons le formulaire, il est masqué, et la propriété submitted est true :

submitted = false; onSubmit() { this.submitted = true; }

La structure finale des répertoires est :

Le code source utilisé dans cet article peut être téléchargé comme suit, en excluant les répertoires node_modules et typings.

Téléchargement du code source

Le GIF de démonstration de l'exemple complet est le suivant :

Autres extensions