Angular NgModel

Objectifs

• Connaitre la directive ngModul d'angular
• Etre capable d'utiliser la directive ngModul d'angular

Présentation

• Angular NgModel est une directive intégrée qui crée une instance FormControl à partir du modèle de domaine et la lie à un élément de contrôle de formulaire.
• La directive ngmodel lie la valeur des contrôles HTML ( entrée, sélection, zone de texte ) aux données d'application.
• L'Angular utilise la directive ngModel pour réaliser la liaison bidirectionnelle sur les éléments du formulaire HTML. Il se lie à un élément de forme analogue input, select, selectarea. etc.
• [(ngModel)] effectue une liaison bidirectionnelle pour la lecture et l'écriture des valeurs de contrôle d'entrée. Si une directive [(ngModel)] est utilisée, le champ d'entrée prend une valeur initiale dans la classe de composant liée et la remet à jour chaque fois qu'une modification de la valeur du contrôle d'entrée est détectée (au clavier et par pression du bouton).

Comment utiliser ngModel

• La directive ngModel ne fait pas partie de la bibliothèque Angular Core. Il fait partie de la bibliothèque FormsModule. Vous devez importer le package FormsModule dans votre module angulaire
• Avant d'utiliser la directive ngModel dans une liaison de données bidirectionnelle, vous devez importer le FormsModule et l'ajouter à la liste des importations NgModule.
• Dans le fichier app.module.ts ajouter la ligne suivante:

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

• Dans le modèle ajouter la ligne suivante:

  <input type="text" name="value" [(ngModel)]="value">

Exemple d'utilisation

• Avant d'utiliser ngmodel, nous devons avoir besoin d'importer "FormsModule" depuis '@ angular/forms'; dans le fichier module.ts comme ci-dessous:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }  

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  email = new FormControl('');
  updateEmail() {
    this.email.setValue('riadhhajji@apcpedagogie.com');
  }
}  

src/app/app.component.html

<div class="container">
  <div class="form-group">
    <label>
      Email:
    </label>
    <input type="text" [formControl]="email" />
  </div>
  <div class="form-group">
    <button (click)="updateEmail()" class="btn btn-dark">Update Email</button>
  </div>
  <p>
    Value: {{ email.value }}
  </p>
</div>