Angular
Formulaires

Lier ngForm à viewChild()

Dans la leçon précédente, on passait le formulaire directement via la fonction HTML : (ngSubmit)="onSubmit(monForm)". Une autre approche plus élégante consiste à attraper le formulaire avec la fameuse télécommande viewChild() depuis le TypeScript !

Le Formulaire Capté
Côté TypeScript (Logique)
La télécommande viewChild('loginForm') écoute le formulaire en direct :
Validité actuelle : INVALIDE

Remplissez le formulaire et envoyez-le.

La Mécanique

En utilisant viewChild<NgForm>('monFormulaire'), vous n'avez plus besoin de passer l'objet formulaire en argument de votre fonction (ngSubmit). Votre fichier TypeScript a désormais un accès complet et permanent (via un Signal) à votre formulaire.

Le Code Source Complet

viewchild-form.component.ts
import { Component, viewChild } from '@angular/core';
import { NgForm, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  imports: [FormsModule],
  template: `
    <!-- Plus de paramètre dans onSubmit() ! -->
    <form #loginForm="ngForm" (ngSubmit)="onSubmit()">
      
      <input type="text" name="username" ngModel required />
      <button type="submit" [disabled]="!loginForm.valid">Login</button>
      
    </form>
  `
})
export class ViewchildNgFormComponent {
  
  // On capte le formulaire identifié par #loginForm
  formSignal = viewChild<NgForm>('loginForm');
  
  onSubmit() {
    const form = this.formSignal(); // On lit le signal
    if (form) {
      console.log('Les données :', form.value);
      form.reset();
    }
  }
}