Que fait la directive NgModel ?

La directive ngModel permet de lier la valeur d'un contrôle HTML (input, select, textarea) à une propriété du composant TS associé. Cette liaison est bidirectionnelle, c'est à dire que dans la liaison template/composant, si un des 2 côtés est modifié, l'autre côté se synchronise.

Autrement dit, si vous écrivez dans l'input, la valeur de la variable sera automatiquement mise à jour dans le fichier typescript du composant. Et inversement, si vous modifiez la propriété du composant depuis le script, vous verrez en temps réel le contenu de votre input se mettre à jour.

Dans quel cas utiliser ngModel ?

La directive ngModel s'utilise dans le cas où vous souhaitez :

• lire le contenu d'un contrôle (input, select, textarea) depuis votre code
• écrire dans un contrôle depuis votre code

Vous pouvez combiner NgModel avec NgForm pour interagir avec un formulaire entier.

Exemple d'utilisation

Pour commencer, vous devrez importer FormsModule dans le module de votre composant, afin de pouvoir y utiliser la directive ngModel.

1
2
3
4
5
6
7
8
9
10
import { FormsModule } from '@angular/forms';

@NgModule({
  ...,
  imports: [
    ...,
    FormsModule
  ],
  ...
})

Utilisation de ngModel sans formulaire

Dans cet exemple, utilisons simplement NgModel pour récupérer la valeur d'un input.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {Component} from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <input [(ngModel)]="name">
    <p>Value: </p>
    <button (click)="printValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name = '';

  printValue(): void {
    console.log(this.name);
  }
}

Ici, on a relié la valeur de l'input à la propriété name du composant.

name est affiché dans le composant grâce à l'interpolation en ligne 7. Donc à chaque changement de valeur dans l'input, l'interpolation affiche la nouvelle valeur.

Le bouton permet d'afficher en console la valeur présente dans l'input au moment du clic. On peut imaginer à la place de l'affichage en console, un appel vers un service qui utilise cette valeur.

Utilisation de ngModel dans un formulaire

Maintenant, prenons l'exemple d'une combinaison des directives ngForm et ngModel pour relier un formulaire à un composant.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'my-component',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" novalidate>
      <input name="first" ngModel>
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>Form value: </p>
    <p>Form valid: </p>
  `,
})
export class SimpleFormComp {
  onSubmit(formValue:  {first: string, last: string}) {
    console.log(formValue);  // { first: '', last: '' }
  }
}

La directive ngForm créée un FormGroup et le lie au formulaire grâce aux directives ngModel. Le FormGroup va vous permettre de suivre les valeurs du formulaire et ses différents états.

Vous remarquez que le FormGroup est ensuite placé dans une variable de template ici, appelée f. On peut récupérer la valeur du FormGroupe grâce à f.value ainsi que des informations sur l'état du formulaire avec f.valid par exemple.

Il y a beaucoup de manières de relier votre formulaire au composant avec NgModel et/ou NgForm, celle-ci est simplement un exemple de cas possible.

Conclusion

Voilà pour la directive NgModel ! Pour résumer, NgModel permet de faire transiter en temps réel une donnée entre le template et l'application. J'espère que cela vous a aidé à comprendre le concept du "two-way-binding".

N'hésitez pas à laisser un commentaire si vous avez des suggestions d'améliorations !