Reactive Form avec Angular

29/04/20 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.

Reactive Form avec Angular

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.

Mais pour les plus préssés d'entre vous
La demo est accessible sur demo.ganatan.com
https://demo.ganatan.com/angular-example-reactive-form

Le code source est disponible et téléchargeable sur Github
https://github.com/ganatan/angular-example-reactive-form


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


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

Le résultat final

Vous pouvez voir et tester le résultat final en production.

Cliquez sur l'image suivante ou sur ce lien https://demo.ganatan.com/angular-example-reactive-form

Demo reactive Form avec Angular

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
  • On installe la dépendance Jquery
    Remarque
    Nous utiliserons la version 3.4.1
    La dernière version 3.5 pose pour l'instant problème avec le composant collapse de 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-example-reactive-form --defaults

# Installer la librairie Bootstrap
npm install bootstrap --save

# Installer la librairie Jquery
npm install jquery@3.4.1 --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/jquery/dist/jquery.min.js",
      "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 7 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

Ganatan site Web avec Angular

Laissez un commentaire

Votre adresse mail ne sera pas publiée.