Skip to content

Utiliser ngModel

Pensez à ajouter FormsModule

FormsModule est un module Angular qui contient une série de directives et de services qui vous permettent de créer et de gérer des formulaires dans votre application Angular. Il contient notamment les directives suivantes :

  • ngModel : permet de lier la valeur d'un champ de formulaire à une propriété d'un composant.
  • ngModelGroup : permet de grouper des champs de formulaire de manière à ce qu'ils partagent une validation et une gestion de l'état communs.
  • ngForm : permet de créer un formulaire Angular à partir d'un formulaire HTML.
  • formControlName : permet de lier un champ de formulaire à un FormControl dans un FormGroup.

Pour utiliser FormsModule dans votre application Angular, vous devez l'importer dans votre module principal ou dans un module dédié aux formulaires, et l'ajouter à la liste des imports du décorateur @NgModule.

ts
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
     // Ici contient les composants qui profitent de FormsModule
  ],
  imports: [
    FormsModule,
    // d'autres imports ici
  ]
})
export class MonModule { }

ngModel

ngModel est un directive d'Angular qui permet de lier une propriété d'un composant à un élément de formulaire HTML. Cela signifie qu'elle permet de synchroniser les données saisies dans un formulaire avec les propriétés de votre composant, et inversement.

Imaginons que vous voulez créer un formulaire pour laisser un avis sur un produit sur un site internet. Vous allez avoir un formulaire avec un champ pour saisir le nom de la personne, un champ pour saisir l'email, un champ pour saisir le message et un bouton pour soumettre l'avis.

Avec ngModel, vous allez pouvoir lier les champs de saisie dans le formulaire à des propriétés dans ton composant, de sorte que chaque fois que quelqu'un saisit des informations dans les champs, ces informations sont automatiquement mises à jour dans les propriétés correspondantes de ton composant.

Voici un exemple de comment utiliser ngModel pour lier une propriété d'un composant à un champ de saisie dans un formulaire :

ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `
    <form>
      <label>Nom :</label>
      <input type="text" [(ngModel)]="nom" name="nom">
      <br>
      <label>Email :</label>
      <input type="email" [(ngModel)]="email" name="email">
      <br>
      <label>Avis :</label>
      <textarea [(ngModel)]="avis" name="avis"></textarea>
      <br>
      <button type="submit" (click)="onSubmit()">Soumettre</button>
    </form>
  `,
  styles: []
})
export class FormComponent {
  nom: string = '';
  email: string = '';
  avis: string = '';

  onSubmit() {
    console.log(`Nom: ${this.nom}`);
    console.log(`Email: ${this.email}`);
    console.log(`Avis: ${this.avis}`);
    //Ici on peut envoyer les données à un service ou à une API
  }
}

Dans ce code, on utilise ngModel pour lier la propriété "nom" du composant à l'input de type text, la propriété "email" du composant à l'input de type email et la propriété "avis" du composant au textarea. Ainsi, à chaque fois que quelqu'un saisit des informations dans les champs, les propriétés "nom", "email" et "avis" du composant sont automatiquement mises à jour avec ces informations.

Pourquoi utilise t-on la syntaxe [()] ?

La syntaxe [()] que l'on voit dans l'expression de liaison bidirectionnelle [(ngModel)] est utilisée pour relier une propriété d'un composant à une valeur d'un élément HTML, de sorte que les modifications apportées à l'élément HTML soient automatiquement reflétées dans la propriété du composant, et inversement.

La partie entre crochets "[]" est utilisée pour la liaison unidirectionnelle de données, cela signifie que les données sont reliées d'un objet à un autre mais ne sont pas mise à jour dans l'autre sens.

La partie entre parenthèses "()" est utilisée pour la liaison de données dans l'autre sens. Cela signifie que les données sont reliées d'un objet à un autre et sont mises à jour dans les deux sens.

Comment utiliser ngModelOptions ?

Pour utiliser ngModelOptions sur Angular, vous pouvez l'appliquer comme un attribut sur un élément de formulaire qui utilise ngModel. Par exemple :

html
<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">

Cela spécifie que la valeur de ngModel doit être mise à jour uniquement lorsque l'élément de formulaire perd le focus (c'est-à-dire lorsque l'utilisateur quitte le champ).

Voici la liste des options

  • updateOn: spécifie quand la valeur de ngModel doit être mise à jour. Les options possibles sont "blur" (par défaut), "submit", "change" ou une combinaison de ces événements séparés par une virgule.
  • standalone : Cette option permet de spécifier si le contrôle ngModel doit être lié à d'autres contrôles de formulaire. Si standalone est défini sur true, ngModel ne sera pas lié à d'autres contrôles de formulaire, et ne sera pas affecté par la validation ou la soumission du formulaire. Par défaut, standalone est défini sur false

Erreurs courantes

ErreurDescription
"ngModel' is not a known property of 'input'Cette erreur se produit lorsque vous utilisez ngModel sur un élément input sans avoir importé FormsModule dans votre module.
"Can't bind to 'ngModel' since it isn't a known property of 'input'Cette erreur se produit lorsque vous utilisez ngModel sur un élément input sans avoir importé FormsModule dans votre module.
"No provider for [service]Cette erreur se produit lorsque vous utilisez un service qui n'est pas fourni dans le scope approprié.
"Template parse errors: 'component' is not a known elementCette erreur se produit lorsque vous utilisez un composant qui n'est pas déclaré dans votre module.
"Cannot find a differ supporting object '[object Object]' of type 'object'Cette erreur se produit lorsque vous utilisez ngFor sur un objet qui n'est pas itérable.
"Can't bind to 'formGroup' since it isn't a known property of 'form'Cette erreur se produit lorsque vous utilisez formGroup sur un élément form sans avoir importé ReactiveFormsModule dans votre module.
"Error: Uncaught (in promise): Error: No component factory found for [component]Cette erreur se produit lorsque vous utilisez un composant qui n'a pas de factory associée.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !