Aller au contenu
Angular Tutorials

Liaison du formulaire

Objectifs de ce chapitre

  • ✔️
    Liaison de votre formulaire HTML
    Apprenez à lier un formulaire à une variable dans Angular.

Pour l’instant, la saisie du formulaire est réalisable. Il vous faut, maintenant, récupérer les données du formulaire pour créer une nouvelle tâche et l’ajouter à la liste existante.

API Forms Angular

Angular fournit 2 API différentes pour travailler avec des formulaires :

  • Template-driven Forms
  • Reactive Forms

Dans ce cours, vous utiliserez l’API Template-driven Forms pour lier le formulaire.

Template-driven Forms

Que veut dire piloté par le Template HTML ?

La structure du formulaire et les validations sont définies dans la vue (Template HTML). Les formulaires basés sur des Template HTML sont faciles à utiliser et adaptés aux formulaires simples. Côté Angular, notre objectif est de lier chaque champ à une propriété pour récupérer sa valeur actuelle.

Type TaskForm

Vous allez créer un nouveau type TaskForm pour représenter le formulaire d’une tâche. Le type TaskForm aura deux propriétés : title et description. Sa forme est différente de l’interface Task que vous avez créée précédemment. Vous allez en créer une nouvelle dérivée à partir de l’interface Task existante.

Choisissez le type d’utilitaire TypeScript

Le type d’utilitaire TypeScript Pick vous permet de créer un nouveau type en sélectionnant certaines propriétés d’un type existant. L’avantage d’utiliser le type d’utilitaire Pick est qu’il vous aide à éviter de dupliquer les propriétés du type existant.

Vous lui transmettez le type d’origine et les propriétés que vous souhaitez sélectionner.

task.model.ts
export type TaskForm = Pick<Task, 'title' | 'description'>;

🎓 Instructions

  1. Ouvrez le fichier src/app/task-form/task.model.ts.

  2. Ajoutez le code suivant en dessous de l’existant:

    task.model.ts
    export type TaskForm = Pick<Task, 'title' | 'description'>;

  3. Importer la fonctionnalité de formulaires dans Angular avec le module FormsModule

    app.module.ts
    import { NgModule } from '@angular/core';
    

    import {FormsModule} from "@angular/forms";
    

    @NgModule({
    declarations: [
    AppComponent,
    TaskListComponent,
    TaskFormComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    

    FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

  4. Modifiez le fichier src/app/task-form/task-form.component.ts.

    task-form.component.ts
    import { Component } from '@angular/core';
    

    import {TaskForm} from '../model/task.model';
    

    @Component({
      selector: 'app-task-form',
      templateUrl: './task-form.component.html',
      styleUrls: ['./task-form.component.css']
    })
    export class TaskFormComponent {
    

      task: TaskForm = {
        title: '',
        description: ''
      };
    }

Liaison du formulaire

Pour lier un formulaire à votre nouvelle variable task dans Angular, vous pouvez utiliser la directive [ngModel]. La directive [ngModel] est une directive intégrée qui vous permet de lier une entrée de formulaire à une variable. Mais cela ne suffira pas pour votre cas d’utilisation : cela vous permet uniquement de lier la valeur de la propriété au champ, et non de mettre à jour la variable en fonction des saisies de l’utilisateur.

Liaison de données bidirectionnelle

Pour mettre à jour votre variable task lorsque le formulaire est mis à jour, vous devez utiliser le format [(ngModel)]. Cette syntaxe nous permet de :

  • lier la valeur de la tâche au champ du formulaire;
  • mettre à jour la valeur de la tâche en fonction de la saisie de l’utilisateur.

A présent, il faut lier l’input title à la propriété task.title et le textarea description à la propriété task.description.

🎓 Instructions

  1. Ouvrez le fichier src/app/task-form/task-form.component.html.

  2. Remplacez le contenu du fichier par le code suivant :

task-form.component.html
<form>
  <label for="title" class="form-label">Titre</label>


  <input type="text" id="title" name="title" class="form-control" [(ngModel)]="task.title">


  <label for="description" class="form-label">Description</label>


  <textarea id="description" name="description" class="form-control" [(ngModel)]="task.description"></textarea>


  <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

En étant lié au formulaire, la variable task sera mis à jour lorsque le formulaire sera mis à jour.

✔️ Ce que vous avez appris

Dans ce chapitre, vous avez appris à lier un formulaire à une variable dans Angular. Vous avez appris à créer une variable task pour représenter une tâche. Vous avez également appris à utiliser la directive [(ngModel)] pour lier une entrée de formulaire à un modèle.

🔗 Ressources