Angular : formulaire

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[Link]@[Link]

H & H: Research and Training 1 / 75

 Plan
1 Définition
2 Évènements
3 Template-driven forms
Liaison (binding) bidirectionnelle
Validation de formulaire
Soumission de formulaire
4 Reactive forms
FormControl
FormGroup
Soumission de formulaire
Validation de formulaire
Affichage de messages d’erreur
FormGroup imbriqué
FormBuilder
FormArray
H & H: Research and Training 2 / 75
 Définition

Angular

Définition : Un formulaire

H I ©
EL
un outil graphique que nous créons avec le langage de description
HTML
M OU
il permet à l’utilisateur de E
f L des données
saisir
e
r une autre page, vers une base de
chvers
©
données...
A
et de les envoyer

H & H: Research and Training 3 / 75

 Définition

Angular

Alors pourquoi Angular ?

Angular nous facilite
H I ©
EL
OU
la récupération des données saisies
M
la validation et le contrôleE
f Lvaleurs saisies
des
chr e
A
la gestion d’erreurs
©
...

H & H: Research and Training 4 / 75

 Définition

Angular

Que propose Angular ?

I ©
Template-driven forms : utilisant FormsModule, facile et conseillé
H
pour les formulaires simples
UEL
O
f E LM
Reactive forms basé sur ReactiveFormsModule : robuste,
évolutif et conçu pour les applications nécessitant des contrôles
particuliers
ch r e
©A
Form Group
Form Builder

H & H: Research and Training 5 / 75

 Évènements

Angular

Un évènement
action appliquée par l’utilisateur ou simulée par le développeur sur
un .[Link]

H I ©
EL
un évènement déclenché ⇒ une méthode, dans le
.[Link] associé, exécutée
O U
f E LM
ch r e
©A

H & H: Research and Training 6 / 75

 Évènements

Angular

Un évènement
action appliquée par l’utilisateur ou simulée par le développeur sur
un .[Link]

H I ©
EL
un évènement déclenché ⇒ une méthode, dans le
.[Link] associé, exécutée
O U
f E LM
ch r e
Pour commencer ©A
créer un composant formulaire
créer un chemin /formulaire permettant d’afficher ce
composant

H & H: Research and Training 6 / 75

 Évènements

Angular

Le fichier [Link] Le fichier

[Link]
import { Component, OnInit } from ’@angular/
core’; <p>
formulaire works!
@Component({
I
</p>
H ©
EL
selector: ’app-formulaire’,
templateUrl: ’./[Link]’
O U
LM
,
styleUrls: [’./[Link]’]
})
r e f E
ch
export class FormulaireComponent implements

©A
OnInit {

constructor() { }

ngOnInit() {
}
}

H & H: Research and Training 7 / 75

 Évènements

Angular
Le fichier [Link] Le fichier
[Link]
import { Component, OnInit } from ’@angular/
core’; <div>
<button (click)="
@Component({
selector: ’app-formulaire’,
H I ©
direBonjour()">
cliquer
templateUrl: ’./[Link]’
,
UEL </button>
</div>
O
LM
styleUrls: [’./[Link]’]
})

e f E
export class FormulaireComponent implements
r
OnInit {
ch
constructor() { }©A
ngOnInit() { }
direBonjour(): void {
[Link](’Bonjour’);
}
}

H & H: Research and Training 8 / 75

 Évènements

Angular
(eventBinding)

La valeur de l’attribut évènement situé entre () sera le nom d’une

méthode de FormulaireComponent

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 9 / 75

 Évènements

Angular
(eventBinding)

La valeur de l’attribut évènement situé entre () sera le nom d’une

méthode de FormulaireComponent

H I ©
Explication
U EL
M O
E L la méthode direBonjour()
En cliquant sur le bouton cliquer,
f
est exécutée.
c h re
Bonjour ©estAaffiché dans la console

H & H: Research and Training 9 / 75

 Évènements

Angular
(eventBinding)

La valeur de l’attribut évènement situé entre () sera le nom d’une

méthode de FormulaireComponent

H I ©
Explication
U EL
M O
E L la méthode direBonjour()
En cliquant sur le bouton cliquer,
f
est exécutée.
c h re
Bonjour ©estAaffiché dans la console

Et si on veut récupérer la valeur saisie dans une zone texte et l’afficher

dans une autre partie du composant.

H & H: Research and Training 9 / 75

 Évènements

Le fichier [Link] Le fichier

[Link]
import { Component, OnInit } from ’@angular/
core’; <div>
<input type=text #nom>
@Component({ </div>
selector: ’app-formulaire’, <div>
templateUrl: ’./[Link]’ <button (click)="
,
H I ©
direBonjour(nom.

EL
styleUrls: [’./[Link]’] value)">
})
export class FormulaireComponent implements
O U cliquer
</button>
OnInit {
result = "";
f E LM </div>
<div>
constructor() { }
ch r e Bonjour {{ result }}

©A
</div>
ngOnInit() { }
direBonjour(nom:string){
[Link] = nom;
}
}

#nom est une variable locale contenant les attributs de cet élément HTML. Les variables locales
peuvent être utilisées avec tout élément HTML, <p>, <h>...

H & H: Research and Training 10 / 75

 Évènements

Angular

H I ©
Remarque
UEL
O
LM
Il est possible de simplifier le code précédant en utilisant le two
way binding
r e f E
ch
©A

H & H: Research and Training 11 / 75

 Template-driven forms Liaison (binding) bidirectionnelle

Angular
Plusieurs formes de binding

{{ interpolation }} : permet de récupérer la valeur d’un

attribut déclarée dans le .[Link]
[ one way binding ] : permet aussi de récupérer la valeur
H I ©
d’un attribut déclarée dans le .[Link]
U EL
M O
( event binding ) : permet
f E L parau [Link] de

c h re
récupérer des valeurs passées .[Link]

©A

H & H: Research and Training 12 / 75

 Template-driven forms Liaison (binding) bidirectionnelle

Angular
Plusieurs formes de binding

{{ interpolation }} : permet de récupérer la valeur d’un

attribut déclarée dans le .[Link]
[ one way binding ] : permet aussi de récupérer la valeur
H I ©
d’un attribut déclarée dans le .[Link]
U EL
M O
( event binding ) : permet
f E L parau [Link] de

c h re
récupérer des valeurs passées .[Link]

{{ © A }} est un raccourci de [ one way

interpolation
binding ]
<p [textContent]= "result"></p>
<p> {{ result }} </p>
<!-- Les deux écritures sont équivalentes -->
H & H: Research and Training 12 / 75
 Template-driven forms Liaison (binding) bidirectionnelle

Angular

Il est possible de combiner one way binding et event binding

Résultat : two way binding

Un changement de valeur dans .[Link] sera aperçu
H I ©
dans .[Link] et un changement dans
U EL
.[Link] sera reçu dans .[Link]
O
f E LM
ch r e
©A

H & H: Research and Training 13 / 75

 Template-driven forms Liaison (binding) bidirectionnelle

Angular

Il est possible de combiner one way binding et event binding

Résultat : two way binding

Un changement de valeur dans .[Link] sera aperçu
H I ©
dans .[Link] et un changement dans
U EL
.[Link] sera reçu dans .[Link]
O
f E LM
ch r e
two way binding
©A
Pour la liaison bidirectionnelle, il nous faut la propriété ngModel
Pour pouvoir utiliser la propriété ngModel, il faut ajouter le
module FormsModule dans [Link]

H & H: Research and Training 13 / 75

 Template-driven forms Liaison (binding) bidirectionnelle

Angular
Nouveau contenu d’[Link]

import { BrowserModule } from ’@angular/platform-browser’;

import { NgModule } from ’@angular/core’;
import { FormsModule } from ’@angular/forms’;
//+ les autres imports

H I ©
EL
@NgModule({
declarations: [
AppComponent,
O U
AdresseComponent,
PersonneComponent,
f E LM
FormulaireComponent
ch r e
©A
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

H & H: Research and Training 14 / 75

 Template-driven forms Liaison (binding) bidirectionnelle

Le fichier [Link] Le fichier

[Link]
import { Component, OnInit } from ’@angular/
core’; <div>
<input type=text [(
@Component({ ngModel)]=nom>
selector: ’app-formulaire’, </div>
templateUrl: ’./[Link]’ <div>
,
styleUrls: [’./[Link]’]
H I ©
<button (click)="
direBonjour()">
})
U EL cliquer
export class FormulaireComponent implements
O </button>

LM
OnInit { </div>
nom = "";
result = "";
r e f E <div>
Bonjour {{ result }}
constructor() { }
ch </div>

ngOnInit() { }
direBonjour(){
©A
[Link] = [Link];
}
}

Nous n’avons pas besoin de cliquer pour envoyer la valeur saisie dans le champ texte, elle est
mise à jour simultanément dans la classe quand elle est modifiée dans la vue.
H & H: Research and Training 15 / 75
 Template-driven forms Liaison (binding) bidirectionnelle

Angular

Le fichier [Link] Le fichier

[Link]
import { Component, OnInit } from ’@angular/
core’; <div>

@Component({
H ©
<input type=text [(
I
ngModel)]=nom>
selector: ’app-formulaire’,
U EL
</div>
templateUrl: ’./[Link]’
O <div>

LM
, Bonjour {{ nom }}

})
r e f E
styleUrls: [’./[Link]’] </div>

ch
export class FormulaireComponent implements

©A
OnInit {
nom = "";
constructor() { }

ngOnInit() { }
}

H & H: Research and Training 16 / 75

 Template-driven forms Validation de formulaire

Angular
Commençons par créer une interface personne

ng generate interface interfaces/personne

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 17 / 75

 Template-driven forms Validation de formulaire

Angular
Commençons par créer une interface personne

ng generate interface interfaces/personne

H I ©
On peut aussi utiliser le raccourci
U EL
O
LM
ng g i interfaces/personne

r e f E
ch
©A

H & H: Research and Training 17 / 75

 Template-driven forms Validation de formulaire

Angular
Commençons par créer une interface personne

ng generate interface interfaces/personne

H I ©
On peut aussi utiliser le raccourci
U EL
O
LM
ng g i interfaces/personne

r e f E
ch
©A
Mettons à jour le contenu de [Link]
export interface Personne {
id?: number;
nom?: string;
prenom?: string;
}

H & H: Research and Training 17 / 75

 Template-driven forms Validation de formulaire

Angular
Considérant le formulaire [Link]
<form>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link]>
</div>
<div>
H I ©
EL
Prénom : <input type=text name=prenom [(ngModel)]=personne.
prenom>
O U
LM
</div>
<div>
<button>
r e f E
ch
©A
Ajouter
</button>
</div>
</form>

H & H: Research and Training 18 / 75

 Template-driven forms Validation de formulaire

Angular
Considérant le formulaire [Link]
<form>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link]>
</div>
<div>
H I ©
EL
Prénom : <input type=text name=prenom [(ngModel)]=personne.
prenom>
O U
LM
</div>
<div>
<button>
r e f E
ch
©A
Ajouter
</button>
</div>
</form>

Pour utiliser ngModel dans un formulaire, il faut définir une valeur pour l’attribut
name de chaque élément du formulaire.

H & H: Research and Training 18 / 75

 Template-driven forms Validation de formulaire

Angular
Le fichier [Link]
import { Component, OnInit } from ’@angular/core’;
import { Personne } from ’../../interfaces/personne’;

@Component({
selector: ’app-formulaire’,
H I ©
templateUrl: ’./[Link]’,
U EL
O
LM
styleUrls: [’./[Link]’]
})
r e f E
export class FormulaireComponent implements OnInit {
ch
©A
personne: Personne = { };

constructor() { }

ngOnInit() { }
}

H & H: Research and Training 19 / 75

 Template-driven forms Validation de formulaire

Angular

Pour soumettre le formulaire, il faut qu’il soit valide. Supposant que

H I ©
EL
OU
les deux zones textes sont obligatoires
M
f E L désactivé, on l’active que lorsque
le bouton doit être initialement
chr e
le formulaire est valide
© A

H & H: Research and Training 20 / 75

 Template-driven forms Validation de formulaire

Angular
Commençons par rendre les deux zones textes obligatoires
<form>
<div>
Nom : <input type=text name=nom [(ngModel)]=personne.
nom required>
H I ©
</div>
U EL
<div>
O
f E LM
Prénom : <input type=text name=prenom [(ngModel)]=

</div>
[Link] required>
ch r e
<div>
<button> ©A
Ajouter
</button>
</div>
</form>

H & H: Research and Training 21 / 75

 Template-driven forms Validation de formulaire

Angular
Désactivons le bouton
<form>
<div>
Nom : <input type=text name=nom [(ngModel)]=personne.
nom required>
H I ©
</div>
U EL
<div>
O
f E LM
Prénom : <input type=text name=prenom [(ngModel)]=

</div>
[Link] required>
ch r e
<div>
©A
<button disabled>
Ajouter
</button>
</div>
</form>

H & H: Research and Training 22 / 75

 Template-driven forms Validation de formulaire

Angular

Question : comment réactiver le bouton ?

Écrire une fonction JavaScript pour tester si les deux champs ne

sont pas vides
H I ©
EL
Écrire une méthode dans la classe qui vérifiera à chaque saisie si
U
O
les deux champs ne sont pas vides pour réactiver le bouton

f E LM
ch r e
©A

H & H: Research and Training 23 / 75

 Template-driven forms Validation de formulaire

Angular

Question : comment réactiver le bouton ?

Écrire une fonction JavaScript pour tester si les deux champs ne

sont pas vides
H I ©
EL
Écrire une méthode dans la classe qui vérifiera à chaque saisie si
U
O
les deux champs ne sont pas vides pour réactiver le bouton

f E LM
ch r e
©A
Avec les directivesAngular, il y a plus simple

Utiliser la directive ngForm pour créer une variable locale

associée au formulaire
Exploiter la propriété valid de ngForm pour valider le formulaire

H & H: Research and Training 23 / 75

 Template-driven forms Validation de formulaire

Angular
Pour le réactiver
<form #monForm=ngForm>
<div>
Nom : <input type=text name=nom [(ngModel)]=personne.
nom required>
H I ©
</div>
U EL
<div>
O
f E LM
Prénom : <input type=text name=prenom [(ngModel)]=
[Link] required>
</div>
ch r e
<div>
©A
<button [disabled]=![Link]>
Ajouter
</button>
</div>
</form>

H & H: Research and Training 24 / 75

 Template-driven forms Validation de formulaire

Angular

Question : et si on veut afficher en rouge les champs obligatoires

H I ©
non-renseignés ?
U EL
O
Utiliser les variables locales
f E LM
ch r e
Exploiter les propriétés CSS fournies par Angular
©A

H & H: Research and Training 25 / 75

 Template-driven forms Validation de formulaire

Angular
Utilisons les variables locales et affichons les classes CSS associées attribuées
par Angular
<form #monForm=ngForm>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link]
required #nom>
H I ©
</div>
U EL
{{ [Link]}}
O
<div>

f E LM
Prénom : <input type=text name=prenom [(ngModel)]=personne.

ch
prenom required #prenom> r e
©A
</div>
{{ [Link]}}
<div>
<button [disabled]=![Link]>
ajouter
</button>
</div>
</form>

H & H: Research and Training 26 / 75

 Template-driven forms Validation de formulaire

Angular

Les classes CSS affichées pour les deux champs

ng-untouched : classe Angular appliquée quand le champ n’est

H I ©
pas touché (son inverse est ng-touched)
U EL
M O
ng-pristine : classe Angular
vide (son inverse este f E L appliquée quand le champ est
chr
ng-dirty)

©
ng-invalid A : classe Angular appliquée quand le champ n’est
pas valid (son inverse est ng-valid)

H & H: Research and Training 27 / 75

 Template-driven forms Validation de formulaire

Angular

Nettoyons le code précédent

<form #monForm=ngForm>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link]
required #nom>
H I ©
</div>
U EL
<div>
O
prenom required #prenom>
f E LM
Prénom : <input type=text name=prenom [(ngModel)]=personne.

</div>
ch r e
©A
<div>
<button [disabled]=![Link]>
ajouter
</button>
</div>
</form>

H & H: Research and Training 28 / 75

 Template-driven forms Validation de formulaire

Angular

Définissons des propriétés pour quelques classes CSS fournies

par Angular
H I ©
.ng-invalid:not(form){
U EL
border-left: 5px solid red; O
}
f E LM
.ng-valid:not(form){
ch r e
©A
border-left: 5px solid green;
}

H & H: Research and Training 29 / 75

 Template-driven forms Validation de formulaire

Angular
On peut aussi afficher un message en cas de violation de contrainte
<form #monForm=ngForm>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link] required
#nom="ngModel">
</div>
<div [hidden]="[Link]">
H I ©
Le nom est obligatoire
</div>
U EL
O
LM
<div>

required #prenom="ngModel">
r e E
Prénom : <input type=text name=prenom [(ngModel)]=[Link]
f
</div>
ch
©A
<div [hidden]="[Link]">
Le prénom est obligatoire
</div>
<div>
<button [disabled]=![Link]>
ajouter
</button>
</div>
</form>

H & H: Research and Training 30 / 75

 Template-driven forms Validation de formulaire

Angular
Pour ne pas afficher les messages d’erreur au chargement de la page
<form #monForm=ngForm>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link] required #
nom="ngModel">
</div>
<div [hidden]="[Link] || [Link]">
H I ©
Le nom est obligatoire
</div>
U EL
O
LM
<div>

required #prenom="ngModel">
r e E
Prénom : <input type=text name=prenom [(ngModel)]=[Link]
f
</div>
ch
©A
<div [hidden]="[Link] || [Link]">
Le prénom est obligatoire
</div>
<div>
<button [disabled]=![Link]>
ajouter
</button>
</div>
</form>

H & H: Research and Training 31 / 75

 Template-driven forms Soumission de formulaire

Angular
Pour soumettre un formulaire, on utilise la directive ngSubmit
<form #monForm=ngForm (ngSubmit)=ajouterPersonne()>
<div>
Nom : <input type=text name=nom [(ngModel)]=[Link] required #
nom="ngModel">
</div>
<div [hidden]="[Link] || [Link]">
H I ©
Le nom est obligatoire
</div>
U EL
O
LM
<div>

required #prenom="ngModel">
r e E
Prénom : <input type=text name=prenom [(ngModel)]=[Link]
f
</div>
ch
©A
<div [hidden]="[Link] || [Link]">
Le prénom est obligatoire
</div>
<div>
<button [disabled]=![Link]>
ajouter
</button>
</div>
</form>

H & H: Research and Training 32 / 75

 Template-driven forms Soumission de formulaire

Angular
Le fichier [Link]
import { Component, OnInit } from ’@angular/core’;
import { Personne } from ’../../interfaces/personne’;

@Component({
selector: ’app-formulaire’,
templateUrl: ’./[Link]’,
H I ©
EL
styleUrls: [’./[Link]’]
})
O U
LM
export class FormulaireComponent implements OnInit {
personnes: Array<Personne> = [];
personne: Personne = { };
r e f E
ch
©A
constructor() { }
ngOnInit(): void { }

ajouterPersonne(): void {
[Link]({ ...[Link] });
[Link] = ’’;
[Link] = ’’;
[Link]([Link]);
}
}
H & H: Research and Training 33 / 75
 Template-driven forms Soumission de formulaire

Angular

Exercice 1
H I ©
Modifier le composant formulaire pour afficher les personnes
EL
ajoutées en-dessous du formulaire
M OU
f
À chaque ajout, la nouvelleE L
personne ajoutée apparaı̂t comme
ch
dernier élément de r
laeliste des personnes (affichée en-dessous du
formulaire) A
©

H & H: Research and Training 34 / 75

 Template-driven forms Soumission de formulaire

Angular

Exercice 2
Créez un composant calculette (n’oubliez pas de lui associer
H I ©
une route calculette)
U EL
M O
Dans [Link],
f E L boutonsdéfinissez deux champs
input de type number
h r e et quatre : un pour chaque

© Ac
opération arithm étique
Le résultat sera affiché en-dessous du formulaire.

H & H: Research and Training 35 / 75

 Reactive forms

Angular

Pour commencer
H I ©
créer un composant form
UEL
O
f E LM
créer un chemin /form permettant d’afficher ce composant

ch r e
ajouter ReactiveFormsModule dans la section imports de
[Link]
©A

H & H: Research and Training 36 / 75

 Reactive forms FormControl

Angular

FormControl

H I ©
Une classe Angular
U EL
O
LM
Permettant d’associer un attribut de composant à un champ de

r e f E
formulaire défini dans le template associé afin de faciliter
le binding
ch
©A
le contrôle et la validation

H & H: Research and Training 37 / 75

 Reactive forms FormControl

Angular
Dans [Link], déclarons un attribut nom de type FormControl

import { Component, OnInit } from ’@angular/core’;

import { FormControl } from ’@angular/forms’;

@Component({
selector: ’app-form’,
H I ©
templateUrl: ’./[Link]’,
U EL
styleUrls: [’./[Link]’]
O
})
f E LM
ch r e
export class FormComponent implements OnInit {

A
nom = new FormControl(’’);
©
constructor() { }
ngOnInit() { }
}

Dans [Link], on aura un champ de formulaire associé à l’objet

nom.
H & H: Research and Training 38 / 75
 Reactive forms FormControl

Angular
Dans [Link], on ajoute un champ associé à l’attribut nom

<div>
Nom :
<input type="text" [formControl]="nom">
</div>
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 39 / 75

 Reactive forms FormControl

Angular
Dans [Link], on ajoute un champ associé à l’attribut nom

<div>
Nom :
<input type="text" [formControl]="nom">
</div>
H I ©
U EL
O
f E LM
On peut ajouter un bouton avec un event binding

<label>
ch r e
©A
Nom :
<input type="text" [formControl]="nom">
</label>
<button (click)=’afficherNom()’>cliquer</button>

H & H: Research and Training 39 / 75

 Reactive forms FormControl

Angular
Dans [Link], on ajoute un champ associé à l’attribut nom

<div>
Nom :
<input type="text" [formControl]="nom">
</div>
H I ©
U EL
O
f E LM
On peut ajouter un bouton avec un event binding

<label>
ch r e
©A
Nom :
<input type="text" [formControl]="nom">
</label>
<button (click)=’afficherNom()’>cliquer</button>

N’oublions pas de définir la méthode afficherNom() dans [Link].

H & H: Research and Training 39 / 75

 Reactive forms FormControl

Dans [Link], on ajoute la méthode afficherNom()

import { Component, OnInit } from ’@angular/core’;
import { FormControl } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
H I ©
})
U EL
O
export class FormComponent implements OnInit {

f
nom = new FormControl(’’);E LM
constructor() { c}h
r e
© {}
ngOnInit():
A
void
afficherNom(): void {
[Link]([Link]);
}
}

H & H: Research and Training 40 / 75

 Reactive forms FormControl

Dans [Link], on ajoute la méthode afficherNom()

import { Component, OnInit } from ’@angular/core’;
import { FormControl } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
H I ©
})
U EL
export class FormComponent implements OnInit {
O
f
nom = new FormControl(’’);E LM
constructor() { c}h
r e
© {}
ngOnInit():
A
void
afficherNom(): void {
[Link]([Link]);
}
}
En cliquant sur le bouton, la valeur saisie dans le champ texte sera affichée dans la
console.
H & H: Research and Training 40 / 75
 Reactive forms FormControl

Dans [Link], on peut utiliser le constructeur de FormControl

pour définir une valeur initiale à afficher au chargement du composant
import { Component, OnInit } from ’@angular/core’;
import { FormControl } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
H I ©
styleUrls: [’./[Link]’]
U EL
})
O
f E LM
export class FormComponent implements OnInit {

ch r
nom = new FormControl(’wick’); e
©A
constructor() { }
ngOnInit() { }

afficherNom() {
[Link]([Link]);
}
}

H & H: Research and Training 41 / 75

 Reactive forms FormGroup

Angular

FormGroup H I ©
U EL
Une classe Angular O
f E LM
Composée de plusieurs objets de type FormControl
ch r e
©A

H & H: Research and Training 42 / 75

 Reactive forms FormGroup

Dans [Link], commençons par définir un objet de type

FormGroup
import { Component, OnInit } from ’@angular/core’;
import { FormControl, FormGroup } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
H I ©
styleUrls: [’./[Link]’]
U EL
})
O
f E LM
export class FormComponent implements OnInit {

ch r
personneForm = new FormGroup({ e
©A
id: new FormControl(’’),
nom: new FormControl(’’),
prenom: new FormControl(’’)
});

constructor() { }
ngOnInit(): void { }
}

H & H: Research and Training 43 / 75

 Reactive forms FormGroup

Angular
Dans [Link], créons maintenant le formulaire
prenant les trois éléments déclarés dans le FormGroup
<form [formGroup]="personneForm">
<div>
Identifiant :
H I ©
<input type="number" formControlName="id">
U EL
</div>
O
<div>
f E LM
Nom :
ch r e
©A
<input type="text" formControlName="nom">
</div>
<div>
Prénom :
<input type="text" formControlName="prenom">
</div>
</form>
H & H: Research and Training 44 / 75
 Reactive forms FormGroup

Angular
On peut ajouter un bouton avec un event binding
<form [formGroup]="personneForm">
<div>
Identifiant :
<input type="number" formControlName="id">
</div>
H I ©
<div>
U EL
Nom :
O
</div>
f E LM
<input type="text" formControlName="nom">

<div>
ch r e
©A
Prénom :
<input type="text" formControlName="prenom">
</div>
<button (click)=’afficherTout()’>cliquer</button>
</form>

H & H: Research and Training 45 / 75

 Reactive forms FormGroup

Angular
On peut ajouter un bouton avec un event binding
<form [formGroup]="personneForm">
<div>
Identifiant :
<input type="number" formControlName="id">
</div>
H I ©
<div>
U EL
Nom :
O
</div>
f E LM
<input type="text" formControlName="nom">

<div>
ch r e
©A
Prénom :
<input type="text" formControlName="prenom">
</div>
<button (click)=’afficherTout()’>cliquer</button>
</form>

N’oublions pas de définir la méthode afficherTout() dans [Link].

H & H: Research and Training 45 / 75

 Reactive forms FormGroup

Angular
Dans [Link], ajoutons la méthode afficherTout()
import { Component, OnInit } from ’@angular/core’;
import { FormControl, FormGroup } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
H I ©
EL
styleUrls: [’./[Link]’]
})
O U
LM
export class FormComponent implements OnInit {

personneForm = new FormGroup({

r e f E
ch
id: new FormControl(’’),

©A
nom: new FormControl(’’),
prenom: new FormControl(’’)
});

constructor() { }
ngOnInit(): void { }
afficherTout(): void {
[Link]([Link]);
}
}
H & H: Research and Training 46 / 75
 Reactive forms FormGroup

Angular

Pour récupérer le FormControl associé à nom

[Link]([Link]);

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 47 / 75

 Reactive forms FormGroup

Angular

Pour récupérer le FormControl associé à nom

[Link]([Link]);

H I ©
EL
Ou aussi
M OU
f E L
[Link]([Link](’nom’));
chr e
© A

H & H: Research and Training 47 / 75

 Reactive forms FormGroup

Angular

Pour récupérer le FormControl associé à nom

[Link]([Link]);

H I ©
EL
Ou aussi
M OU
f E L
[Link]([Link](’nom’));
chr e
© A
Pour vider les champs d’un formulaire
[Link]();

H & H: Research and Training 47 / 75

 Reactive forms FormGroup

On peut initialiser les champs du formulaire avec la méthode setValue()

import { Component, OnInit } from ’@angular/core’;
import { FormControl, FormGroup } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
H I ©
EL
export class FormComponent implements OnInit {

personneForm = new FormGroup({

O U
id: new FormControl(’’),
nom: new FormControl(’’),
f E LM
ch
prenom: new FormControl(’’)
r e
©A
});

constructor() { }
ngOnInit() {
[Link]({nom: ’wick’, prenom: ’john’, id: 1});
}
afficherTout() {
[Link]([Link]);
}
}
H & H: Research and Training 48 / 75
 Reactive forms FormGroup

valueChanges permet de surveiller le changement de valeur d’un champ du formulaire

import { Component, OnInit } from ’@angular/core’;
import { FormControl, FormGroup } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
H I ©
EL
export class FormComponent implements OnInit {

personneForm = new FormGroup({

O U
id: new FormControl(’’),
nom: new FormControl(’’),
f E LM
ch
prenom: new FormControl(’’)
r e
©A
});

constructor() { }
ngOnInit() {
[Link](change => {
[Link](change);
});
}
afficherTout() { [Link]([Link]); }
}
H & H: Research and Training 49 / 75
 Reactive forms Soumission de formulaire

Angular
Pour la soumission de formulaire, on ajoute un event binding (ngSubmit) et on
ajoute un bouton de type submit

<form [formGroup]="personneForm" (ngSubmit)=’afficherTout()’>

<div>
Identifiant :
H I ©
<input type="number" formControlName="id">
</div>
U EL
O
LM
<div>
Nom :
r e f E
<input type="text" formControlName="nom">
ch
©A
</div>
<div>
Prénom :
<input type="text" formControlName="prenom">
</div>
<button type=’submit’>Envoyer</button>
</form>

H & H: Research and Training 50 / 75

 Reactive forms Validation de formulaire

Angular
Pour la validation de formulaire, on commence par désactiver le bouton tant que
le formulaire n’est pas valide
<form [formGroup]="personneForm" (ngSubmit)=’afficherTout()’>
<div>
Identifiant :
<input type="number" formControlName="id">
H I ©
</div>
U EL
<div>
O
Nom :

f E LM
<input type="text" formControlName="nom">
</div>
ch r e
©A
<div>
Prénom :
<input type="text" formControlName="prenom">
</div>
<button type=’submit’ [disabled]=’![Link]’>
Envoyer
</button>
</form>

H & H: Research and Training 51 / 75

 Reactive forms Validation de formulaire

Angular

Étape suivante : définir les règles de validation

H I ©
La classe FormControl peut prendre deux paramètres : la
U EL
O
valeur initiale à afficher dans le formulaire et la deuxième une
règle de validation
f E LM
r e
Angular© Acrhègle decontenant
Pour définir une
Validators
validation, on peut utiliser la classe
plusieurs règles de validation

H & H: Research and Training 52 / 75

 Reactive forms Validation de formulaire

Dans [Link], définissons quelques règles de validation

import { FormControl, FormGroup, Validators } from ’@angular/forms’;

personneForm = new FormGroup({

id: new FormControl(’’, [Link]),
nom: new FormControl(’’, [[Link](/ˆ[A-Z][a-z]{2,10}$/),
[Link]]),
prenom : new FormControl(’’, [ [Link],
checkPrenomValidator ])
H I ©
});
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 53 / 75

 Reactive forms Validation de formulaire

Dans [Link], définissons quelques règles de validation

import { FormControl, FormGroup, Validators } from ’@angular/forms’;

personneForm = new FormGroup({

id: new FormControl(’’, [Link]),
nom: new FormControl(’’, [[Link](/ˆ[A-Z][a-z]{2,10}$/),
[Link]]),
prenom : new FormControl(’’, [ [Link],
checkPrenomValidator ])
H I ©
});
U EL
O
f E LM
ch r e
©A
Explication

Le champ id est obligatoire.

Le champ nom est obligatoire est doit respecter une expression régulière qui exige que la
première soit en majuscule est que le nombre de caractère soit entre 3 et 11.

Le champ prenom est aussi obligatoire et doit respecter une fonction (qu’on a préparée
pour ça) appelée checkPrenomValidator.

H & H: Research and Training 53 / 75

 Reactive forms Validation de formulaire

Angular

La fonction checkPrenomValidator()
function checkPrenomValidator(control: FormControl):
object | null {
H I ©
const str: string = [Link];
U EL
O
LM
if (str[0] >= ’A’ && str[0] <= ’Z’) {
return null;
r e f E
} else {
ch
} ©A
return { erreur: ’Prénom non valide’ };

H & H: Research and Training 54 / 75

 Reactive forms Affichage de messages d’erreur

Angular
Pour afficher les messages d’erreurs

<form [formGroup]="personneForm" (ngSubmit)=’afficherTout()’>

<div>
Identifiant :
<input type="number" formControlName="id">
</div>

©
<div *ngIf="id?.invalid && (id?.dirty || id?.touched)">
<div *ngIf="id?.errors?.required">L’identifiant est obligatoire</div>

H I
EL
</div>
<div>
Nom :
<input type="text" formControlName="nom">
O U
LM
</div>

e E
<div *ngIf="nom?.invalid && (nom?.dirty || nom?.touched)">

f
<div *ngIf="nom?.errors?.required">Le nom est obligatoire</div>

r
ch
<div *ngIf="nom?.errors?.pattern">Première lettre en majuscule et min 3 lettres max 11<
/div>

©A
</div>
<div>
Prénom :
<input type="text" formControlName="prenom">
</div>
<div *ngIf="prenom?.invalid && (prenom?.dirty || prenom?.touched)">
<div *ngIf="prenom?.errors?.required">Le prénom est obligatoire</div>
<div *ngIf="prenom?.errors?.erreur">Première lettre en majuscule</div>
</div>
<button type=’submit’ [disabled]=’![Link]’>Envoyer</button>
</form>

H & H: Research and Training 55 / 75

 Reactive forms Affichage de messages d’erreur

Angular

On ne peut accéder à la propriété invalid ni errors si on ne

définit pas de getter pour chaque FormControl dans
[Link]
get nom(): AbstractControl | null {
H I ©
EL
return [Link](’nom’);
}
O U
f E LM
get id(): AbstractControl | null {
ch r e
return [Link](’id’);
} ©A
get prenom(): AbstractControl | null {
return [Link](’prenom’);
}

H & H: Research and Training 56 / 75

 Reactive forms FormGroup imbriqué

Angular

Remarque
H I ©
EL
OU
Il est possible d’imbriquer les FormGroup
M
E Ladresse défini dans le FormGroup
Par exemple : un FormGroup
f
personne
chr e
© A

H & H: Research and Training 57 / 75

 Reactive forms FormGroup imbriqué

Dans [Link], définissons les FormGroup imbriqués

import { Component, OnInit } from ’@angular/core’;

import { FormControl, FormGroup, Validators } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
})
H I ©
EL
export class FormComponent implements OnInit {
personneForm = new FormGroup({
O U
LM
id: new FormControl(’’),
nom: new FormControl(’’),
prenom: new FormControl(’’),
r e f E
ch
adresse: new FormGroup({

©A
rue: new FormControl(’’),
ville: new FormControl(’’),
codePostal: new FormControl(’’)
})
});
constructor() { }
ngOnInit() { }
afficherTout() { [Link]([Link]); }
}

H & H: Research and Training 58 / 75

 Reactive forms FormGroup imbriqué

Dans [Link], créons le formulaire associé aux FormGroup imbriqués

<form [formGroup]="personneForm" (ngSubmit)=’afficherTout()’>
<div>
Identifiant : <input type="number" formControlName="id">
</div>
<div>
Nom : <input type="text" formControlName="nom">
</div>
<div>
H I ©
EL
Prénom : <input type="text" formControlName="prenom">
</div>
<div formGroupName="adresse">
O U
<h3>Adresse</h3>
<div>
f E LM
ch r e
Rue : <input type="text" formControlName="rue">

©A
</div>
<div>
Ville : <input type="text" formControlName="ville">
</div>
<div>
Code postal : <input type="text" formControlName="codePostal">
</div>
</div>
<button type=’submit’>Envoyer</button>
</form>
H & H: Research and Training 59 / 75
 Reactive forms FormGroup imbriqué

Angular

Remarque
H I ©
EL
La méthode setValue() permet d’initialiser, ou modifier les
U
O
valeurs de formulaire : il faut préciser une valeur pour chaque
FormControl du FormGroup
f E LM
ch r e
La méthode patchValue() permet d’initialiser, ou modifier
©A
quelques (ou tous les) FormControl du FormGroup

H & H: Research and Training 60 / 75

 Reactive forms FormGroup imbriqué

Angular

Exemple (dans ngOnInit())

[Link]({
prenom: ’abruzzi’,
H I ©
adresse: {
U EL
codePostal: ’13000’ O
}
f E LM
});
ch r e
©A

H & H: Research and Training 61 / 75

 Reactive forms FormGroup imbriqué

Angular

Exemple (dans ngOnInit())

[Link]({
prenom: ’abruzzi’,
H I ©
adresse: {
U EL
codePostal: ’13000’ O
}
f E LM
});
ch r e
©A
Les champs Prénom et Code postal sont initialisés avec les valeurs
abruzzi et 13000

H & H: Research and Training 61 / 75

 Reactive forms FormBuilder

Angular

FormBuilder
H I ©
Une classe service défini par Angular
U EL
O
f E LM
Donc, pour l’utiliser, il faut l’injecter dans le constructeur

ch r e
Il permet de simplifier la construction d’un formulaire en évitant les

©A
répétitions de FormControl

H & H: Research and Training 62 / 75

 Reactive forms FormBuilder

Dans [Link], on injecte FormBuilder dans le constructeur puis on l’utilise

pour construire le formulaire
import { Component, OnInit } from ’@angular/core’;
import { Validators, FormBuilder } from ’@angular/forms’;

@Component({
selector: ’app-form’,
templateUrl: ’./[Link]’,
styleUrls: [’./[Link]’]
H I ©
EL
})
export class FormComponent implements OnInit {
personneForm = [Link]({
O U
id: [null],
nom: [’doe’],
f E LM
ch r e
prenom: [’’, [[Link], [Link](2)]],

©A
adresse: [Link]({
rue: [’’],
ville: [’’],
codePostal: [’’]
}),
});
constructor(private fb: FormBuilder) { }
ngOnInit(): void { }
afficherTout(): void { [Link]([Link]); }
}
H & H: Research and Training 63 / 75
 Reactive forms FormBuilder

Dans [Link], rien à changer

<form [formGroup]="personneForm" (ngSubmit)=’afficherTout()’>
<div>
Identifiant : <input type="number" formControlName="id">
</div>
<div>
Nom : <input type="text" formControlName="nom">
</div>
<div>
H I ©
EL
Prénom : <input type="text" formControlName="prenom">
</div>
<div formGroupName="adresse">
O U
<h3>Adresse</h3>
<div>
f E LM
ch r e
Rue : <input type="text" formControlName="rue">

©A
</div>
<div>
Ville : <input type="text" formControlName="ville">
</div>
<div>
Code postal : <input type="text" formControlName="codePostal">
</div>
</div>
<button [disabled]=’![Link]’>Envoyer</button>
</form>
H & H: Research and Training 64 / 75
 Reactive forms FormBuilder

Angular

On peut aussi surveiller l’évolution de notre formulaire grâce à

H I ©
EL
l’attribut status (à placer dans le formulaire)

O U
LM
<div>
état : {{ [Link] }}
r e f E
ch
</div>

©A

H & H: Research and Training 65 / 75

 Reactive forms FormBuilder

Angular

Exercice
H I ©
EL
Modifier le composant builder pour afficher les personnes
ajoutées en-dessous du formulaire
M OU
f
À chaque ajout, la nouvelleE L
personne ajoutée apparaı̂t comme
ch
dernier élément de r
laeliste des personnes (affichée en-dessous du
formulaire) A
©

H & H: Research and Training 66 / 75

 Reactive forms FormBuilder

Angular

Exercice H I ©
U EL
O
Ajoutez un bouton supprimer pour chaque personne affichée.

f E LM
ch r e
En cliquant sur le bouton, la personne associée sera supprimée.

©A

H & H: Research and Training 67 / 75

 Reactive forms FormArray

Angular

FormArray

H I ©
EL
Défini dans FormBuilder

O U
Il permet de définir un tableau de taille indéterminée de
FormControl
f E LM
Une personne c r e
h pratiquer plusieurs sports (le nombre peut
peut
©
varier d’une
A
personne à une autre) ⇒ on peut utiliser FormArray

H & H: Research and Training 68 / 75

 Reactive forms FormArray

Angular
Dans [Link], définissons notre FormArray
personneForm = [Link]({
id: [null],
nom: [’doe’],
prenom: [’’, [[Link], Validators.
H I ©
minLength(2)]],
U EL
O
LM
adresse: [Link]({
rue: [’’],
r e f E
ville: [’’],
ch
}), ©A
codePostal: [’’]

sports: [Link]([
[Link](’’)
])
});

H & H: Research and Training 69 / 75

 Reactive forms FormArray

Angular

Pour afficher instantanément les sports ajoutés par l’utilisateur,

on foit retourner notre FormArray
H I ©
U EL
get sports(): FormArray {
O
return [Link](’sports’) as
f E LM
FormArray;
ch r e
©A
}

H & H: Research and Training 70 / 75

 Reactive forms FormArray

Angular
Dans [Link], ajoutons notre FormArray à notre
formulaire précédent
<div formArrayName="sports">
<h3>Sports </h3>
<button type=button (click)="ajouterSport()">
H I ©
Ajouter sport
U EL
O
LM
</button>

f E
<div *ngFor="let sport of [Link]; let i=
r e
index">
ch
<div>
Sport : ©A
<input type="text" [formControlName]="i">
</div>
</div>
</div>

H & H: Research and Training 71 / 75

 Reactive forms FormArray

Angular

Définissons maintenant la méthode ajouterSport()

ajouterSport(): void {
[Link]([Link](’’));
}
H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 72 / 75

 Reactive forms FormArray

Angular

Définissons maintenant la méthode ajouterSport()

ajouterSport(): void {
[Link]([Link](’’));
}
H I ©
U EL
O
f E LM
Remarque
ch r e
©A
On ajoute à notre tableau un nouvel élément vide pour que
l’utilisateur puisse saisir un nouveau sport.
Le sport ajouté par l’utilisateur est lié directement à notre
FormArray

H & H: Research and Training 72 / 75

 Reactive forms FormArray

Angular

Exercice H I ©
U EL
O
Ajoutez un bouton supprimer pour chaque sport.

f E LM
ch r e
En cliquant sur le bouton, le sport associé sera supprimé.

©A

H & H: Research and Training 73 / 75

 Reactive forms FormArray

Angular

H I ©
Remarque
U EL
O
LM
FormArray est une classe qui peut être aussi utilisée dans un
FormGroup
r e f E
ch
©A

H & H: Research and Training 74 / 75

 Reactive forms FormArray

Angular

Exercice
Dans un nouveau composant, créer un formulaire qui permet à

H I ©
une personne de saisir son nom, son prénom ainsi qu’un tableau
de commentaire de taille variable.
U EL
O
LM
Chaque commentaire est composé d’un titre, un contenu et une
catégorie.
r e f E
surc
En cliquant A h les données saisies sont affichées en
Ajouter,
©
bas du formulaire et le formulaire est vidé.
Aucun champ ne doit être vide à l’ajout, les nom et prénom
doivent commencer par une lettre majuscule.

H & H: Research and Training 75 / 75