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.

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

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

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 :

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
  }
}

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.

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 :

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

<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 ​