Angular

Appearance

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

Pensez à ajouter FormsModule ​

FormsModule est un module Angular qui contient une série de directives et de services qui vous permettent de créer et de gérer des formulaires dans votre application Angular. Il contient notamment les directives suivantes :

  • ngModel : permet de lier la valeur d'un champ de formulaire à une propriété d'un composant.
  • ngModelGroup : permet de grouper des champs de formulaire de manière à ce qu'ils partagent une validation et une gestion de l'état communs.
  • ngForm : permet de créer un formulaire Angular à partir d'un formulaire HTML.
  • formControlName : permet de lier un champ de formulaire à un FormControl dans un FormGroup.

Pour utiliser FormsModule dans votre application Angular, vous devez l'importer dans votre module principal ou dans un module dédié aux formulaires, et l'ajouter à la liste des imports du décorateur @NgModule.

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

@NgModule({
  declarations: [
     // Ici contient les composants qui profitent de FormsModule
  ],
  imports: [
    FormsModule,
    // d'autres imports ici
  ]
})
export class MonModule { }
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
     // Ici contient les composants qui profitent de FormsModule
  ],
  imports: [
    FormsModule,
    // d'autres imports ici
  ]
})
export class MonModule { }

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'}
{first: 'Nancy', last: 'Drew'}

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

ts
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  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: string = '';
  name = {first: 'Nancy', last: 'Drew'};

  submit (form: NgForm) { }
}
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  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: string = '';
  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>
<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.