angular-les-formulaires - At Framework Cot\u00e9 Client FrameworkAngular formulaire Iset Mahdia Dv3.1 Plan 1 2 D\u00e9finition E\u00b4v\u00e9nements 3

angular-les-formulaires - At Framework Cotu00e9 Client...

This preview shows page 1 - 12 out of 82 pages.

Iset Mahdia Dv3.1 At. Framework Coté Client FrameworkAngular : : formulaire
Plan 1 2 3 4 Définition E ´ vénements Template-driven forms Liaison (binding) bidirectionnelle Validation de formulaire Soumission de formulaire 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
De´finition Angular Définition : Un formulaire un outil graphique que nous créons avec le langage de description HTML il permet à l’utilisateur de saisir des données et de les envoyer vers une autre page, vers une base de donneés... H & H: Research and Training 3 /75
De´finition Angular Alors pourquoi Angular ? Angular nous facilite la récupération des données saisies la validation et le contrôle des valeurs saisies la gestion d’erreurs ... H & H: Research and Training 4 /75
De´finition Angular Que propose Angular ? Template-driven forms : utilisant FormsModule , facile et conseillé pour les formulaires simples Reactive forms basé sur ReactiveFormsModule : robuste, évolutif et conçu pour les applications nécessitant des contrôles particuliers Form Group Form Builder H & H: Research and Training 5 /75
E´ve`nements Angular Un événement action appliquée par l’utilisateur ou simulée par le développeur sur un .component.html un événementdéclenché une méthode, dans le .component.ts associé, exécutée H & H: Research and Training 6 /75
E´ve`nements Angular Un e´ve`nement action appliquée par l’utilisateur ou simulée par le développeur sur un .component.html un événementdéclenché une méthode, dans le .component.ts associé, exécutée Pour commencer créer un composant formulaire créer un chemin /formulaire permettant d’afficher ce composant H & H: Research and Training 6 /75
© Achref EL MO © E´ve`nements Angular H & H: Research and Training 7 /75 Le fichier formulaire.component.ts import { Component, OnInit } from ’@angular/ core’; @Component({ selector: ’app-formulaire’, templateUrl: ’./formulaire.component.html’ , styleUrls: [’./formulaire.component.css’] }) export class FormulaireComponent implements OnInit { constructor() { } ngOnInit() { } } Le fichier formulaire.component.html < p > formulaire works! </ p >
© Achref EL MO © E´ve`nements Angular Le fichier formulaire.component.ts import { Component, OnInit } from ’@angular/ core’; @Component({ selector: ’app-formulaire’, templateUrl: ’./formulaire.component.html’ , styleUrls: [’./formulaire.component.css’] }) export class FormulaireComponent implements OnInit { constructor() { } ngOnInit() { } direBonjour(){ console.log("Bonjour"); } } Le fichier formulaire.component.html H & H: Research and Training 8 /75 < div > < button (click)=" direBonjour()"> cliquer </ button > </ div >
E´ve`nements Angular (eventBinding) La valeur de l’attribut événementsituéentre () sera le nom d’une méthode de FormulaireComponent H & H: Research and Training 9 /75
E´ve`nements Angular (eventBinding) La valeur de l’attribut événementsituéentre () sera le nom d’une méthode de FormulaireComponent Explication En cliquant sur le bouton cliquer , la méthode direBonjour() est exécutée. Bonjour est affichédans laconsole H & H: Research and Training 9 /75

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture