Angular NgModel

Angular NgModel

  1. Objectifs

    • Connaitre la directive ngModul d’angular
    • Etre capable d’utiliser la directive ngModul d’angular
  2. Présentation

    • Angular NgModel

    • 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).



  3. 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">
  4. 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:
    1. 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 { }  
        
    2. 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');
          }
        }  
        
    3. 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>
        
        



Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement