Angular/Tutorials

De WikiSys
Aller à : navigation, rechercher

Documentation

Tutoriels Français

Angular Chef

Qu’est-ce qu’un formulaire Angular ?

3) Deux syntaxes : formulaires réactifs et pilotés par le template

Angular propose justement deux syntaxes pour gérer les formulaires : la syntaxe des formulaires réactifs (reactive forms), et la syntaxe des formulaires pilotés par le template (template-driven forms).

Le fonctionnement interne est le même quelle que soit la syntaxe choisie. Angular va interpréter ces syntaxes pour générer ce qu’on appelle un modèle de formulaire, qui se compose d’instances de FormControl et de FormGroup.

On a généralement un FormControl par champ, et un FormGroup qui représente le formulaire lui-même. (Un exemple de modèle de formulaire est présenté dans la recette https://www.angularchef.com/recette/65/)

Choisir entre formulaire réactif et formulaire piloté par le template (reactive form vs. template-driven form)

Les formulaires réactifs sont plus robustes et plus évolutifs, mais leur code est plus complexe.

Les formulaires pilotés par le template ont une syntaxe plus simple, mais ils sont moins puissants.

Modèle de formulaire : le point commun aux 2 syntaxes

Avant de passer en revue les différences, rappelons que les deux syntaxes - réactive et pilotée par le template - ont pour objectif de créer un modèle de formulaire.

Ce modèle se compose de deux types d’instances : FormControl et FormGroup.

  • Un FormControl correspond à un champ individuel de formulaire. Il permet de traquer la valeur et le statut de validité de ce champ.
  • Un FormGroup correspond à un ensemble de champs de formulaire. Il permet de traquer en un seul endroit toutes les valeurs et tous les statuts d’un groupe de champs. Un formulaire contient au minimum un FormGroup correspondant au formulaire lui-même. Mais il peut en contenir plusieurs et ils peuvent être imbriqués.

Le modèle de formulaire constitué par l’ensemble des FormControls et des FormGroups permet à Angular de “piloter” et de communiquer avec le formulaire.

Créer un formulaire réactif Angular

Les formulaires réactifs sont plus robustes. Ils sont plus faciles à faire évoluer, à réutiliser et à tester, mais leur syntaxe est un peu plus complexe. Si votre application fait un gros usage des formulaires, et/ou si vous avez l’habitude d’utiliser les patterns réactifs (c’est-à-dire les observables), alors c’est l’approche à utiliser.

Progressive Web App avec Angular 8

Uploader un fichier avec Angular

OpenClassrooms

developpez.com

learn-angular.fr

Créez une application de type blog

Tutorial English

JWT Authentication & Authorization in NodeJs/Express & MongoDB REST APIs(2019)

Angular Authentication Using JWT

Angular 7 Material

  • https://www. tutorialspoint.com/angular_material7
  • https://www. tutorialspoint.com/angular_highcharts/angular_highcharts_spline_inverted.htm

grokonez.com Angular Tutorial

Angular University Deep Dive Course

How to CRUD in Angular + Firebase Firestore

Realworld example app

cd ~/Angular/angular-realworld-example-app

Angular Crash Course - 2019

Service Observable @Output()

Angular Tutorial for Beginners: Learn Angular from Scratch

Learn Angular7 Tutorial

Angular 7 User Registration and Login Example & Tutorial

Angular 7 Tutorial: Building CRUD Web Application

Building a Simple Angular 7 App with Bootstrap 4 Styling

Angular 7 Tutorial Course — Build a Portfolio Web Application with Angular

Angular 7 Tutorial - Learn Angular 7 by Example

Angular 7 Form Validation Example Tutorial

Sous pages