Développement Framework coté client

Enseignant : Nizar MAATOUG

Institut Supérieur des Études Technologiques de Sidi Bouzid

2020/2021
Résultats

À la fin de ce module, vous serez en mesure de :

◼ Maîtriser l’architecture et les concepts du Framework Angular

◼ Développer des applications Angular

2 Nizar MAATOUG
Structure
Notion de Framework
Introduction au Framework Angular
les langages de programmation utilisés par Angular
Architecture du framework Angular
Démarrer avec Angular
Structure d’un projet Angular
Les composants
Liaison de données (Data Binding)
Les directives
Interaction entre composants
Routage et navigation
Les services
HTTP et les Observables
Formulaires Angular (Template Driven Forms & Formulaire Réactif)

3 Nizar MAATOUG
Architecture logicielle: problématique

 Il vous ait demandé de coder un

programme:
 Partagé entre plusieurs utilisateurs
 Sécurisé
S=a+b
 …
 Que faire pour un deuxième programme Réseau
avec les mêmes spécifications
techniques ? Sécurité
...

S=a-b

4 Nizar MAATOUG
Solution: Serveur d’application

 Réutiliser les services transversaux

Réseau Sécurité ...
 Les assembler dans un seul
programme appelé serveur
d’application S=a+b
 Se focaliser sur la logique métier
de votre application
Serveur d’application

5 Nizar MAATOUG
Architecture logicielle: Problématique

 Il vous ait demandé d’ajouter d’autres S=a+b

fonctionnalités métiers ……………
 fichier volumineux ……………
…………..
 Doit être décomposé en plusieurs
fichiers
 Quelle stratégie suivre ? Quel modèle ?
 Quelle type de communication ? ...

6 Nizar MAATOUG
Solution

 Définir une architecture ou utiliser un modèle d’architecture déjà existant

 Une architecture définit:
 les types de composants de votre application:
 Exemple: composant d’accès aux données, composant de traitement métier, composant
d’affichage,…

 La communication entre ces types de composants

 Un Framework est une implémentation technique d’une architecture
 Facilite le développement en respectant l’architecture associée
 Offre des services transversaux
 Exploite aussi les services du serveur d’application (serveur web)

7 Nizar MAATOUG
Architecture web classique

Web statique
Serveur
GET: page [Link]

Navigateur

[Link]
Pages web HTML +CSS

Web dynamique
Serveur

GET: [Link]?color=red

Navigateur
DB

[Link] Programme web

8 Nizar MAATOUG
Problématique

 Emergence de nouveaux types de terminaux: smartphone, smartwatch,…

 Besoin de faire communiquer des applications via le réseau internet
 La navigation impose le rechargement de la page web, ce qui diminue
l’expérience utilisateur

9 Nizar MAATOUG
Solution

 Exploiter les applications internet (http) pour faire communiquer des applications
 Les services web: SOAP, REST (échange du xml, json: méta-langage)
 Tendance vers les SPA (Single-Page Application): application web mono-page
 Composée d’une seule page web dans laquelle sont chargés des composants graphique,
 L’application s’exécute coté client,
 Possibilité de compilation vers des applications natives (android, ios,…)
 Chargement plus fluide,
 UX plus proche des applications natives
 Exemple: Framework Angular, Reactjs

10 Nizar MAATOUG
Solution: Architecture

Serveur d’application
Client http html
web

Client REST: http+json

Mobile

BD
Client REST: http+json
Angular {
"id":2,

Client SOAP: http+xml "marque": "peugeot",

SOAP
"couleur": "bleu"
}

11 Nizar MAATOUG
Solution: architecture

REST
client Serveur
GET URL/voitures

Retourne liste voitures

GET URL/voitures/1

Retourne voiture id=1

POST URL/voitures Application coté

Application V
serveur BD
Angular OK
V (Backend)
PUT URL/voitures
V
OK
V
DELETE URL/voitures/2

OK

12 Nizar MAATOUG
REST (Representational state transfer)

 REST (Representational State Transfert)

 Style d’architecture logiciel
 définit un ensemble de contraintes à utiliser pour créer des services web
 Basé sur le protocole HTTP et la notion d’URI: Unified Ressource Locator
 Exemple:
 Methode HTTP GET
{
 URI: [Link] "id":2,

"marque": "peugeot",

"couleur": "bleu"
}

13 Nizar MAATOUG
Notion de Framework
Notion de Framework

Un Framework désigne un ensemble cohérent de composants

logiciels structurels
Un Framework sert à créer les fondations ainsi que les grandes
lignes de tout ou d’une partie d'un logiciel (architecture).

composant 1 composant 2 composant n

Framework

15 Nizar MAATOUG
Introduction au Framework Angular
Introduction au framework Angular

◼ Angular Permet de créer la partie Front-End des applications

web de type SPA (Single Page Application)
◼ Une SPA est une application qui contient une seule page HTML
◼ La seule page contient différents composants web.

17 Nizar MAATOUG
Langages

HTML pour les vues

CSS pour les styles
TypeScript pour les scripts à partir de la version 2

18 Nizar MAATOUG
TypeScript

langage de programmation orienté objet

open source
influencé par C# et JavaScript
Développé et présenté par MicroSoft en 2012
il permet de :
typer les variables
définir des classes et des interfaces
utiliser les annotations (les décorateurs)
exporter et importer des modules

19 Nizar MAATOUG
Evolution
Angular 1 (ou AngularJS) présenté en 2009 :
▪ Première version de Angular.
▪ Elle est basée sur une architecture MVC coté client.
▪ Les applications Angular 1 sont écrite en JavaScript.
Angular 2 présenté en octobre 2014 :
▪ Réécriture de Angular 1
▪ Les applications de Angular2 sont écrites en Type Script qui est compilé et traduit en Java
Script avant d’être exécuté par les Browsers Web.
▪ Angular 2 est basée sur une programmation basée sur les Composants Web (Web
Componenet)
▪ remplacement du JavaScript par TypeScript
Angular 4, 5, 6, 7, 8 sont de simples mises à jour de Angular 2

20 Nizar MAATOUG
Architecture du Framework Angular
Architecture du framework Angular

Root component

Component 1

Component 2
Component 21

Component 22

22 Nizar MAATOUG
Architecture du framework Angular

Root Component

Component 1 Component 2

Component 21 Component 22

23 Nizar MAATOUG
Exemple: Application gestion-voitures

HeaderComponent

HomeComponent

FooterComponent

24 Nizar MAATOUG
Exemple: Application gestion-voitures

VoitureDetailComponent

VoitureItemComponent
voitureComponent

25 Nizar MAATOUG
Exemple: Application gestion-voitures

HomeComponent

Header Router Footer

VoitureComponent PageNotFound

VoitureList Router

VoitureItem VoitureStart VoitureDetail VoitureEdit

26 Nizar MAATOUG
Architecture du framework Angular

27 Nizar MAATOUG
Architecture du framework Angular

Une application Angular se compose de :

Un à plusieurs modules dont un est principal.
Chaque module peut inclure :
Des composant web : La partie visible de l‘application Web (IHM)
Des services pour la logique applicative.

28 Nizar MAATOUG
Architecture du framework Angular

29 Nizar MAATOUG
 Démarrer avec Angular

30 Nizar MAATOUG
Démarrer avec Angular

[Link]

31 Nizar MAATOUG
Installation des outils

1. NodeJS : [Link]
NodeJS installe l’outil npm (Node Package Manager) qui permet de
télécharger et installer des bibliothèques JavaScript.
2. Installer ensuite Angular CLI (Command Line Interface) qui
vous permet de générer, compiler, tester et déployer des
projets angular ([Link] ) :
npm install -g @angular/cli

32 Nizar MAATOUG
Nouveau projet Angular

Pour générer la structure d’un projet Angular, on utilise Angular

CLI via sa commande ng suivie des options new et le nom du
projet.
ng new FirstApp
Cette commande génère les différents fichiers requis par une
application basique Angular et installe aussi toutes les
dépendances requise par ce projet.

33 Nizar MAATOUG
Exécuter un projet Angular

Pour excuter un projet Angular, on

exécute la commande suivante à partir
de la racine du projet
ng serve
Cette commande compile le code source
du projet pour transpiler le code
TypeScript en JavaScript et en même
temps démarre un serveur Web local
basé sur NodeJS pour déployer
l’application localement.
Pour tester le projet généré, il suffit de
lancer le Browser et taper l’url :
http:// localhost:4200

34 Nizar MAATOUG
Edition du projet

Plusieurs IDE professionnels peuvent être utilisés pour éditer le

code:
Web Storm
Visual Studio Code
Eclipse avec plugin Angular
D’autres éditeurs classiques peuvent être aussi utilisé :
Atom
Sublime Text
…

35 Nizar MAATOUG
 Structure d’un projet Angular

36 Nizar MAATOUG
Structure d’un projet Angular
Fichiers de test end to end de l’application

Dépendances externes du projet (Librairies javaScripts et css)

Logique applicative du projet (Modules, composants, services,…)

Code source du projet

Fichiers de configuration du projet

37 Nizar MAATOUG
Structure d’un projet Angular

Sélecteur du root component

38 Nizar MAATOUG
Structure d’un projet Angular

39 Nizar MAATOUG
 Les composants @Component

40 Nizar MAATOUG
Les composants

Chaque composant se compose de:

❑ Un classe représentant sa logique métier
❑ Une template HTML: représentant sa vue
❑ Une feuille de style css
❑ Un fichier de test unitaire

41 Nizar MAATOUG
Création de nouveaux composants

• Pour créer facilement des composants Angular, on peut

utiliser la commande ng comme suit :
ng generate component NomComposant
• Dans notre exemple, nous allons créer deux composants :
about et contacts

42 Nizar MAATOUG
Les composants: Détails

Décorateur: indique à Angular

que cette classe joue le rôle d’un
composant avec:
•Un sélecteur ‘app-about’
•Un template HTML
‘./[Link]’
•Un seul fichier de style css
‘./[Link]’

43 Nizar MAATOUG
Déclaration d’un composant

Un composant doit être déclaré dans un module

44 Nizar MAATOUG
Utilisation d’un composant

▪ Un composant peut être inséré dans n’importe quel partie

HTML de l’application en utilisant son sélecteur
▪ Dans cet exemple, les deux composants about et contacts
sont insérés à l’intérieur du composant racine AppComponent

AppComponent

about contacts

45 Nizar MAATOUG
 Liaison de données (Data
Binding)

46 Nizar MAATOUG
Data Binding

• Permet de faire un lien entre les données de la classe du

composant et son Template associé

Classe du composant Template du composant

data string interpolation {{data}}

property Binding <…[property]="data" …

doSome(){
Event Binding <… (click)="doSome()"
…..
}
Two Ways Data Binding <input [(ngModel)]="data"

47 Nizar MAATOUG
Data Binding: Exemple

48 Nizar MAATOUG
Data Binding: Exemple

49 Nizar MAATOUG
importer FormsModule pour ngModel

50 Nizar MAATOUG
Les Directives
Les directives

Il existe deux types de directives:

▪ Les directives structurelles: Elles ont pour but de modifier le
DOM en ajoutant, enlevant ou replaçant un élément du DOM.
▪ Les attribute directives: Elles ont pour but de modifier
l'apparence ou le comportement d'un élément.

52 Nizar MAATOUG
Les directives strucurelles

▪ ngIf
▪ ngSwitch
▪ ngFor

53 Nizar MAATOUG
Directive ngIf

▪ Permet de supprimer ou de recréer l'élément courant suivant

l'expression passée en paramètre
▪ Exemple:
<div *ngIf="1 > 0"> Afficher la div</div>

<div *ngIf="1 < 0"> N’affiche pas la div</div>

54 Nizar MAATOUG
Directive ngIf (if else)

<div *ngIf="afficherNom; else elseBlock">

Nizar MAATOUG
</div>
<ng-template #elseBlock>
******
</ng-template>

55 Nizar MAATOUG
Directive ngIf (if else)

<div *ngIf="afficherNom;then thenBlock; else elseBlock"></div>

<ng-template #thenBlock>
Nizar MAATOUG
</ng-template>

<ng-template #elseBlock>
******
</ng-template>

56 Nizar MAATOUG
Directive ngSwitch

<div [ngSwitch]="couleur">
<div *ngSwitchCase="'rouge'">couleur rouge</div>
<div *ngSwitchCase="'bleu'">couleur bleu</div>
<div *ngSwitchCase="'vert'">couleur vert</div>
<div *ngSwitchDefault>choisir une couleur</div>
</div>

57 Nizar MAATOUG
Directive ngFor

export class TestComponent implements OnInit {

public couleurs = ['rouge', 'vert', 'bleu'];

Liste des couleurs:

constructor() { } <div *ngFor="let c of couleurs">
{{c}}
ngOnInit() { </div>
}

58 Nizar MAATOUG
Les attribute directives
ngStyle

▪ permet de modifier le style d’un élément HTML

▪ s’utilise conjointement avec le property binding pour
récupérer des valeurs définies dans la classe

public styleCorrect={'background-color':'green'};

<div [ngStyle]="styleCorrect">Réponse<div>

60 Nizar MAATOUG
ngClass

▪ permet d’attribuer de nouvelles classes d’un élément HTML

▪ s’utilise conjointement avec le property binding pour
récupérer
des valeurs définies dans la classe ou dans la feuille de style
<div [ngClass]="{'text-success':[Link]}">Réponse</div>

61 Nizar MAATOUG
Questions

1) Quelle est la commande CLI qui permet de créer un

nouveau component ?
❑ ng new nom-composant
❑ ng generate nom-composant
❑ Ng build nom-composant
La commande ng generate permet de créer de nouveaux
éléments (components, services etc.) dans un projet
existant. ng new crée un nouveau projet ; ng build crée le
package global d'un projet terminé.

62 Nizar MAATOUG
Questions

2) Si vous avez une variable name = ‘Nizar' dans votre

code TypeScript, quelle syntaxe utilisez-vous pour
afficher Nizar dans le template ?
❑ les doubles accolades {{ }}
❑ les crochets [ ]
❑ les parenthèses ( )
Les doubles accolades {{}} correspondent au string
interpolation, permettant d'afficher le résultat d'une
expression TypeScript dans le template — ici, une variable.

63 Nizar MAATOUG
Questions

3) Vous souhaitez qu'un bouton de votre template

déclenche une fonction dans votre TypeScript : quelle
syntaxe utilisez-vous pour l'y lier ?
❑ (onClick)
❑ (click)
❑ [click]
En effet, pour lier à l'événement click d'un élément, on
utilise la syntaxe (click) .

64 Nizar MAATOUG
Questions

4) Pour qu'un bouton soit désactivé quand la

valeur authenticated est false , quelle syntaxe
devez-vous utiliser ?
❑ <button disabled="!authenticated">
❑ <button (disabled)="!authenticated">
❑ <button [disabled]="!authenticated">
Il faut utiliser les crochets [ ] pour lier l'expression
conditionnelle à la propriété disabled du bouton.

65 Nizar MAATOUG
Questions

5) Dans quels cas ce paragraphe apparaîtra dans le DOM

?
<p *ngIf="myCondition">Bonjour !</p>
(Plusieurs réponses sont possibles)
❑ myCondition = false;
❑ myCondition = true;
❑ myCondition: string;
❑ myCondition: boolean;
❑ myCondition = "aucune condition";
Un élément qui comporte la directive *ngIf s'affiche si
la condition donnée est une expression conditionnelle
66 qui retourne true .
Nizar MAATOUG
Questions

6) Quelle directive vous permet d'afficher autant de

components <app-draw> qu'il y a de membres dans
l'array drawings ?
❑ <app-draw *ngIf="drawings">
❑ <app-draw *ngFor="let drawing of drawings">
❑ <app-draw *ngFor="for drawing in drawings">
❑ <app-draw *ngFor="drawings">

La directive *ngFor s'emploie comme un for loop

classique : on utilisera donc let … of … .

67 Nizar MAATOUG
 Interaction entre composants

68 Nizar MAATOUG
Interaction entre composants

Composant parent

Data Data
@Output() @Input()

Composant fils

69 Nizar MAATOUG
Exemple

Composant parent
Bonjour Monsieur

Nom (Mohamed)
Bonjour Monsieur

Composant fils
Bonjour Mohamed

70 Nizar MAATOUG
Exemple (parent ->fils)

71 Nizar MAATOUG
Exemple (parent ->fils)

72 Nizar MAATOUG
Exemple (parent ->fils)

73 Nizar MAATOUG
Exemple (fils -> parent)

74 Nizar MAATOUG
Exemple (fils -> parent)

75 Nizar MAATOUG
Résultat

76 Nizar MAATOUG
Navigation Angular: Routage et Navigation
Routage et Navigation

❑ Une application Angular contient plusieurs composants,

❑ Chaque composant possède une vue (template)
❑ Il faut pouvoir naviguer entre les vues quand l’utilisateur
réalise une action.

78 Nizar MAATOUG
Cas d’utilisation: Routage et Navigation

Localhost:4200

Routing navigation

Départements Employés

localhost:4200/departements

localhost:4200/employes

79 Nizar MAATOUG
Démarche

1) Générer un projet Angular avec l’option routing

2) Générer les composants departementList et emplyesList
3) Configurer les routes
4) Ajouter les boutons et utiliser les directives pour naviguer.

80 Nizar MAATOUG
Création du projet avec l’option routing

81 Nizar MAATOUG
Ajout du routing à un projet existant

82 Nizar MAATOUG
Importer le module Routing

83 Nizar MAATOUG
Ajouter la balise <base href="/"> dans [Link]

84 Nizar MAATOUG
Ajouter la directive <router-outlet>

85 Nizar MAATOUG
Générer les composants

ng generate component departementList

ng generate component emplyestList

86 Nizar MAATOUG
Ajouter les routes

87 Nizar MAATOUG
Bonne pratique

88 Nizar MAATOUG
Bonne pratique

89 Nizar MAATOUG
Bonne pratique

90 Nizar MAATOUG
Navigation

91 Nizar MAATOUG
Route de Redirection

❑ Très souvent, un utilisateur essaye de naviguer vers une route

qui n’est pas configurée.
❑ Cela génère une exception.

Solution: rediriger les routes inexistantes vers

un composants « not found »

92 Nizar MAATOUG
Composant PageNotFoundComponent

93 Nizar MAATOUG
Composant PageNotFoundComponent

94 Nizar MAATOUG
Route par défaut

95 Nizar MAATOUG
Routes avec paramètres

DepartementList DepartementDetails

1) Technologies de L’informatique
2) Électrique id Vous avez sélectionné le
3) Mécanique département avec l’id= 1
4) Gestion

96 Nizar MAATOUG
Démarche

Générer un composant DepartementDetails

Configurer le routage avec paramètres vers DepartementDetails
Dans le composant DepartementList, programmer la navigation vers
DepartementDetails
Dans le composant DepartementDetails, extraire l’id de la route active.

97 Nizar MAATOUG
Générer DepartementDetails

ng generate component departementDetails

98 Nizar MAATOUG
Configurer la route avec paramètre id

99 Nizar MAATOUG
Programmer la navigation: Service Router

Injecter le service de
routage Router

100 Nizar MAATOUG

Programmer la navigation: Service Router

101 Nizar MAATOUG

Programmer la navigation: Service Router

102 Nizar MAATOUG

DepartementDetails: Extraire le param id

103 Nizar MAATOUG

Les Services
Problématique

105 Nizar MAATOUG

Inconvénients

Les données sont codés en dur.

Les données sont dupliquées dans les deux composants
Forte possibilité d’incohérence de données
Ajout de responsabilité aux composants (gestion des données)

106 Nizar MAATOUG

Solution

➢ Déporter les données dans un service.

Les services sont conçus pour offrir des données et/ou des
fonctionnalités partagées entre plusieurs composants ou
modules:
▪Partage de données
▪Partage de fonctions (exemple calcul d’age)
▪Connexion réseau et mise à jour des données persistantes avec un service.

107 Nizar MAATOUG

Nouveau Service

ng generate service employs

108 Nizar MAATOUG

Service employs

109 Nizar MAATOUG

Mise à jour du composant Employs-list

110 Nizar MAATOUG

Mise à jour du composant Employs-list-details

111 Nizar MAATOUG

Nouvelle architecture
Employs-Service

Employs-list-Details-component Employs-list-component

112 Nizar MAATOUG

Nouvelle architecture
Injector
Employs-list-component
: ES constructor(private employsService: EmployesService) {
}
: ES

Employs-list-details-component
constructor(private employsService: EmployesService) {
}
: ES

113 Nizar MAATOUG

HTTP et les Observables
HTTP

Une application Angular est SPA (Single Page Application)

Une application Angular s’exécute coté client
Elle doit pouvoir se connecter à un serveur pour synchroniser les
données métier (demander liste de voitures, ajouter nouveau
client, modification, suppression d’une entité métier,….).

115 Nizar MAATOUG

HTTP: Mécanisme

Serveur

Navigateur web

EmloyeList

Get requête

EmloyeService Http DB
Observable
réponse

EmloyeDetails

116 Nizar MAATOUG

Les Observables: programmation Réactive

La programmation réactive se base sur le concept

d'observateur.
Source de données, flux
de données
Observable

notification
notification

EmployeList EmployeDetails … Composant

117 Nizar MAATOUG

Programmation réactive

Avantages:
• Asynchrone
• non bloquante
• Interface graphique plus fluide
Application:
• Data binding
• Gestion des événements
RxJS (Reactive Extentions for JavaScript) est la bibliothèque
JavaScript pour la programmation réactive

118 Nizar MAATOUG

HTTP, Observables et RxJS: Démarche

1. Définir une requête HTTP GET de EmployeService

2. Recevoir un observable, convertir le flux de données en un
tableau d’employés (casting)
3. Abonner les deux composants EmployeList et EmployeDetails
à cet observable

119 Nizar MAATOUG

Importer HttpClientModule

120 Nizar MAATOUG

Déporter les données dans un fichier JSON

121 Nizar MAATOUG

Définir le type IEmploye

122 Nizar MAATOUG

Mettre à jour EmployeService

123 Nizar MAATOUG

Mettre à jour EmployeService

Type de retour:
Observable d’Employé

Appel GET au service web en spécifiant

l’url. le type de retour est spécialisé à
Employee

124 Nizar MAATOUG

Abonner les composants EmployeList et EmloyeDetails à l’observable

125 Nizar MAATOUG

Abonner les composants EmployeList et EmloyeDetails à l’observable

Retourne un observable Abonnement au flux de Traitement du flux par

d’employés l’observable une fonction lambda

126 Nizar MAATOUG

Formulaires Angular

Angular Forms
Angular Forms

Template Class Service Server

Collecter les Bind Data Envoyer les Traiter/sauvegarder

données données les données

128 Nizar MAATOUG

Angular Forms

Un moyen d’interaction avec l’utilisateur

Manipuler les données de l’application:
Ajout, modification de données métiers
En Angular, il y a deux grandes méthodes pour créer des
formulaires :
• la méthode template : vous créez votre formulaire dans le
template, et Angular l'analyse pour comprendre les
différents inputs et pour en mettre à disposition le contenu
• la méthode réactive : vous créez votre formulaire en
TypeScript et dans le template, puis vous en faites la liaison
manuellement — cette approche est plus complexe, mais elle
permet beaucoup plus de contrôle et une approche
dynamique.
129 Nizar MAATOUG
Template Driven Forms
Nouveau projet

ng new TDForms

131 Nizar MAATOUG

Ajouter Bootstrap

Copier le lien du CDN

Bootstrap

132 Nizar MAATOUG

Ajouter Bootstrap

Coller le lien dans [Link]

133 Nizar MAATOUG

Formulaire inscription

134 Nizar MAATOUG

Formulaire inscription

135 Nizar MAATOUG

AppModule: importer FormsModule

136 Nizar MAATOUG

Directive ngForm

Angular associe à chaque formulaire une directive ngForm pour

suivre son état:
• Valeurs des contrôles du formulaire
• Les valeurs sont valides ou non.

137 Nizar MAATOUG

Directive ngForm

138 Nizar MAATOUG

Directive ngModel: identifier les contrôles à suivre

139 Nizar MAATOUG

Attribut "name" pour chaque contrôle du formulaire

140 Nizar MAATOUG

Résultat

141 Nizar MAATOUG

Directive ngModelGroup

Permet de regrouper un ensemble de contrôle dans un seul

objet
Exemple: une adresse est composée d’une ville, rue et numéro
maison

142 Nizar MAATOUG

Directive ngModelGroup

143 Nizar MAATOUG

Data Binding: générer la classe du modèle
Générer la classe de modèle: Etudiant

144 Nizar MAATOUG

Data Binding: instancier le modèle

145 Nizar MAATOUG

Data Binding: ngModel

146 Nizar MAATOUG

Résultat

147 Nizar MAATOUG

Suivi de l’état et de la validité du formulaire

L'utilisation ngModel dans un formulaire offre plus qu'une simple liaison

de données bidirectionnelle
elle indique également si l'utilisateur a touché le contrôle, si la valeur a
changé ou si la valeur est devenue invalide
elle met à jour aussi le contrôle avec des classes CSS Angular spéciales
qui reflètent son état.

148 Nizar MAATOUG

Suivi de l’état et de la validité du formulaire

149 Nizar MAATOUG

Suivi de l’état et de la validité du formulaire

150 Nizar MAATOUG

Appliquer les classes CSS

Deux solutions sont possibles:

1- Définir les classes .ng-valid,…:

2- Utiliser vos propres classes:

151 Nizar MAATOUG

Appliquer les classes CSS
Obtenir la référence de ngModel

Appliquer la classe is-invalid de

Bootstrap si le contrôle est invalide
et il est déjà touché

152 Nizar MAATOUG

Afficher un message d’erreur

Le message sera affiché si le contrôle

est invalide et il est déjà touché

153 Nizar MAATOUG

Validation du formulaire

154 Nizar MAATOUG

Soumettre le formulaire: ngSubmit
Event-binding de l’attribut ngSubmit de
la directive ngForm

155 Nizar MAATOUG

Soumettre le formulaire: ngSubmit

156 Nizar MAATOUG

Formulaire réactif: Reactive Forms
Reactive Forms

• La grande partie du code réside dans la classe du composant

• Adapté aux scénarios complexes
• Des contrôles de formulaires dynamique
• Validation dynamique
• Test unitaire

158 Nizar MAATOUG

Résultat

159 Nizar MAATOUG

Définition de la classe modèle: User

Attribut optionnel de type Array

160 Nizar MAATOUG

Importer ReactiveFormsModule

161 Nizar MAATOUG

FormGroup et FormControl

Un formulaire réactif est de type FormGroup et il regroupe plusieurs FormControl

Nom FormControl
FormGroup
Email FormControl

162 Nizar MAATOUG

FormBuilder
FormBuilder est une classe qui vous met à disposition des méthodes facilitant la
création d'objet FormGroup

163 Nizar MAATOUG

164 Nizar MAATOUG
165 Nizar MAATOUG
Formulaire d’inscription

166 Nizar MAATOUG

Formulaire d’inscription

167 Nizar MAATOUG

La validation: Validators
La classe Validators permet de valider un formulaire réactif

168 Nizar MAATOUG

La validation: Validators

169 Nizar MAATOUG

FormControl dynamique

Objectif: ajouter dynamiquement des contrôles hobby

FormArray: permet de définir un tableau de FormControl
Définir un tableau de
hobbies, initialement vide

170 Nizar MAATOUG

FormControl dynamique

Définir une fonction qui

rajoute dynamiquement un
hobby au formulaire

171 Nizar MAATOUG

FormControl dynamique

172 Nizar MAATOUG

FormControl dynamique

173 Nizar MAATOUG

FormControl dynamique

174 Nizar MAATOUG

Résultat

175 Nizar MAATOUG