Angular NgModel

Angular NgModel

Sommaire

1- Objectifs
2- Présentation
3- Comment utiliser ngModel
4- Exemple d'utilisation
4.1- src/app/app.module.ts
4.2- src/app/app.component.ts
4.3- src/app/app.component.html
4.3.1- Sommaire du cours Angular

Objectifs

Connaitre la directive ngModul d’angular
Etre capable d’utiliser la directive ngModul d’angular

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

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>

Routage et Navigation avec Angular

Sommaire du cours Angular

Angular

Angular NgModel

Angular NgModel

Objectifs

Présentation

Comment utiliser ngModel

Exemple d’utilisation

src/app/app.module.ts

src/app/app.component.ts

src/app/app.component.html

Sommaire du cours Angular

الانتداب

أمر حكومي عدد 802 لسنة 2019 ج1

Leave A Reply Annuler la réponse

Angular

Angular NgModel

Objectifs

Présentation

Comment utiliser ngModel

Exemple d’utilisation

src/app/app.module.ts

src/app/app.component.ts

src/app/app.component.html

Sommaire du cours Angular

الانتداب

أمر حكومي عدد 802 لسنة 2019 ج1

You may also like

Validation de formulaires en Angular

Les directives structurelles

Les types de directives dans Angular

Leave A Reply Annuler la réponse