📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment Regrouper des champs d'un formulaire avec ngModelGroup ? ​

ngModelGroup ​

Vous remarquez cependant que nous avons une propriété pour chaque champ. Mais quelque fois, nous avons un objet. Par exemple, les données de l'utilisateur récupérées sur le serveur :

js
{first: 'Nancy', last: 'Drew'}

La directive ngModelGroup permet de regrouper des champs dans le formulaire :

ts
import { Component } from '@angular/core';
import { NgForm, FormsModule } from '@angular/forms';

@Component({
  selector: 'app',
  standalone: true,
  imports: [FormsModule],
  template: `
  <form #form="ngForm" (submit)="submit(form)">
      <div ngModelGroup="name">
        <input name="first" [(ngModel)]="name.first">
        <input name="last" [(ngModel)]="name.last">
      </div>
  </form>
  `
})
export class AppComponent {
  result = '';
  name = {first: 'Nancy', last: 'Drew'};

  submit (form: NgForm) { }
}

Nous donnons l'objet name à ngModelGroup et appliquons les propriétés de l'objet aux différents champs. Nous sommes pas obligé d'utiliser ngModelGroup quand nous avons un objet. L'idée de pouvoir vérifier que ce groupe de champs est valide indépendamment du reste du formulaire

html
<form #form="ngForm" (submit)="submit(form)">
      <div ngModelGroup="name" #nameCtrl="ngModelGroup">
        <input name="first" [(ngModel)]="name.first" minlength="2">
        <input name="last" [(ngModel)]="name.last" required>
      </div>
      Valide ? : {{nameCtrl.valid}}
</form>

Il suffit de créer une variable locale nameCtrl et de tester sa propriété valid.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !