Comment créer un formulaire avec ngForm dans Angular ?

ngForm est une directive fournie par FormsModule qui transforme automatiquement vos formulaires HTML en formulaires Angular. Elle ajoute :

• La gestion automatique des états (valid, touched, dirty...)
• La validation des champs
• Le suivi des valeurs
• La gestion de la soumission

En utilisant #loginForm="ngForm", vous créez une référence qui donne accès aux valeurs et à l'état du formulaire.

Voir les références : Les références et viewChild

Voici un exemple simple de formulaire avec ngForm :

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
      <input type="text" name="username" ngModel required>
      <input type="password" name="password" ngModel required>
      
      <!-- Désactive le bouton si le formulaire n'est pas valide -->
      <button type="submit" [disabled]="!loginForm.valid">
        Login
      </button>
    </form>
  `
})
export class LoginComponent {
  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log(form.value); // { username: '...', password: '...' }
    }
  }
}

1. Pensez à ajouter FormsModule dans les imports de votre composant. Ainsi, vous pourrez utiliser ngForm et ngModel dans votre formulaire.

2. Mettez ensuite #loginForm="ngForm" sur votre formulaire. ça vous donne accès à l'état du formulaire.

• Validation : loginForm.valid, loginForm.invalid
• État : loginForm.touched, loginForm.dirty, loginForm.pristine
• Valeurs : loginForm.value pour toutes les valeurs du formulaire
• Méthodes : loginForm.reset() pour réinitialiser le formulaire

Astuce

Pour accéder aux champs individuels, utilisez la même syntaxe :

<input name="username" ngModel #username="ngModel">
@if (username.invalid && username.touched) {
  <div>
    Champ requis
  </div>
}

Il faut bien mettre 2 fois ngModel sur les champs, sinon ça ne fonctionnera pas. Le premier ngModel est pour la liaison de données (binding) et le second est pour la validation.

Une autre méthode avec viewChild()

Avant tout, il faut bien comprendre viewChild().

Voir les références : Les références et viewChild

On récupère directement la directive NgForm. De cette manière, on peut accéder à l'état du formulaire.

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #loginForm="ngForm" (ngSubmit)="onSubmit()">
      <input type="text" name="username" ngModel required>
      <input type="password" name="password" ngModel required>
      <button type="submit">Login</button>
    </form>
  `
})
export class LoginComponent {
  // Crée un signal qui surveille le formulaire
  loginForm = viewChild<NgForm>('loginForm');

  // Exemple d'utilisation pour une sauvegarde automatique
  autoSave() {
    const form = this.loginForm();
    if (form && form.dirty) {
      console.log('Sauvegarde auto:', form.value);
    }
  }

  onSubmit() {
    const form = this.loginForm();
    if (form?.valid) {
      console.log('Envoi:', form.value);
    }
  }
}

L'interêt de viewChild() dans le contexte des formulaires permet surtout d'avoir une propriété qui peut être utilisée dans tout le composant. De plus, c'est un signal, donc on peut profiter de l'API des signaux (computed, effect, signal, etc).