Angular NgModel
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
ngmodellie la valeur des contrôles HTML ( entrée, sélection, zone de texte ) aux données d’application. - L’Angular utilise la directive
ngModelpour 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
ngModelne fait pas partie de la bibliothèque Angular Core. Il fait partie de la bibliothèqueFormsModule. Vous devez importer le packageFormsModuledans votre module angulaire - Avant d’utiliser la directive
ngModeldans une liaison de données bidirectionnelle, vous devez importer leFormsModuleet l’ajouter à la liste des importationsNgModule. - 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
-
src/app/app.component.ts
-
src/app/app.component.html
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 { }
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');
}
}
<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>
