Skip to content

Utiliser ngModel

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';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [FormsModule],
  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 composant.
"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.

[Vidéo] Les signaux dans Angular en 3mn

En juillet, recevez notre newsletter avec les dernières actualités et, en avant-première, un lien vers notre prochaine vidéo sur les signaux dans Angular.