Reactive Form avec Angular

Mis à jour : 11/09/2022 danny

Nous allons créer une Reactive Form en utilisant le framework Angular.

Pour la partie graphique nous utiliserons le Framework CSS Bootstrap.

Nous travaillerons notre projet from scratch.

Qu'allons nous faire ?

Ce tutoriel nous servira de rappel et d'aide mémoire lorsque nous aurons besoin de travailler sur les Reactive form.
L' objectif est donc de réaliser un exemple le plus simplement et le plus rapidement possible.

Nous partirons du principe que vous avez les connaissances de base en HTML, CSS et Angular.

Ce tutoriel contient tout ce dont vous avez besoin pour créer et tester notre projet.

Comment le Faire ?

Nous aurons évidemment besoin de deux éléments essentiels.

Node.js
Notre plateforme Javascript
Visual Studio Code
Notre éditeur de code.
C'est celui que je vous conseille mais n'importe lequel fera l'affaire.

Pour plus de détails vous pouvez consulter les tutoriels suivants

Démarrer avec angular
https://www.ganatan.com/tutorials/demarrer-avec-angular
Bootstrap avec Angular
https://www.ganatan.com/tutorials/bootstrap-avec-angular

Les 3 étapes

Nous allons réaliser ce tutoriel en 3 étapes

Création d'un projet de base from scratch
Création d'un composant Reactive Form
Intégration et test des fonctionnalités Reactive Form

Etape 1 - Création du projet from scratch

Tout d'abord les opérations de base pour un premier projet

On installe Angular CLI
On crée notre projet
On installe la dépendance Bootstrap

# Installer Angular CLI via npm
npm install angular CLI

# Générer un projet appelé angular-example-reactive-form avec options par défaut
ng new angular-forms --defaults

# Installer la librairie Bootstrap
npm install bootstrap --save

Maintenant intégrons et testons Bootstrap

On ajoute nos librairies dans le fichier angular.json
On rajoute un bouton dans app.component.html
On vérifie que tout fonctionne correctement

angular.json

"options": {
    "outputPath": "dist/angular-example-reactive-form",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
  },

src/app/app.component.html

<button type="button" class="btn btn-primary">Primary</button>

# On teste le projet
ng serve

Notre projet From Scratch est en place nous pouvons procéder aux modifications.

Etape 2 - Création du composant

Nous allons travailler en utilisant la notion de module.
De cette façon nous pourrons facilement intégrer ces modifications dans un autre projet.

On effectue maintenant les modifications spécifiques à notre étude de cas.

On crée un module et un composant que l'on nomme arbitrairement example-reactive-form

# L'ordre est important pour éviter le code superflu généré Angular CLI

# Création du module
ng generate module example-reactive-form --routing  --module=app

# Création du composant associé
ng generate component example-reactive-form

On modifie et on utilise notre composant Angular.

On intègre notre composant dans le fichier example-reactive-form.component.ts
On ajoute la notion de routing example-reactive-form-routing.module.ts
Remarque
Cette partie sera utile lors de l'utilisation dans un autre projet
On rajoute le module dans la gestion des tests dans le fichier app.component.spec.ts
On appelle notre composant dans le fichier app.component.html

src/app/example-reactive-form/example-reactive-form.module.ts


@NgModule({
  declarations: [ExampleReactiveFormComponent],
  imports: [
    CommonModule,
    ExampleReactiveFormRoutingModule
  ],
  exports: [
    ExampleReactiveFormComponent,
  ],
})
export class ExampleReactiveFormModule { }

src/app/example-reactive-form/example-reactive-form-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ExampleReactiveFormComponent } from './example-reactive-form.component';

const routes: Routes = [
  {
    path: '',
    component: ExampleReactiveFormComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ExampleReactiveFormRoutingModule { }

app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

import { ExampleReactiveFormModule } from './example-reactive-form/example-reactive-form.module';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ExampleReactiveFormModule,
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'angular-example-reactive-form'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('angular-example-reactive-form');
  });

});

src/app/app.component.html

<app-example-reactive-form></app-example-reactive-form>

On vérifie notre projet en l'éxécutant

# On teste le projet
ng serve

Etape 3 - Integration Reactive Form

Pour utiliser les Reactive form voici les éléments essentiels qui nous seront nécessaires.

Le module ReactiveFormsModule

L'importer à partir du package @angular/forms
L'ajouter au module qui en a besoin (ici example-reactive-form.module.ts)

src/app/example-reactive-form/example-reactive-form.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ],
})

export class AppModule { }

Les modules FormGroup, FormControl, FormBuilder et FormArray

Les importer à partir du package @angular/forms
Les ajouter au composant qui en a besoin (ici example-reactive-form.component.ts)

src/app/example-reactive-form/example-reactive-form.component.ts

import { FormGroup, FormControl } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { FormArray } from '@angular/forms';

Codes de base

src/app/example-reactive-form/example-reactive-form.component.ts

export class ExampleReactiveFormComponent implements OnInit {

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
  }

}

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos guides complets

Démarrez avec angular CLI

Gérez le routing

Appliquez le Lazy loading

Intégrez Bootstrap

Utilisez Python avec Angular

Utilisez Django avec Angular

Utilisez Flask avec Angular

JE CREE MON COMPTE ET JE TELECHARGE MES GUIDES