Comment créer un formulaire avec ngForm dans Angular ?

ngForm est un module d'Angular qui fournit des directives et des classes pour travailler avec des formulaires HTML. Il permet de créer des formulaires dynamiques et de valider les données saisies par l'utilisateur. Il est utilisé ici pour accéder aux données saisies par l'utilisateur et pour vérifier si le formulaire est valide avant de soumettre les données.

Solution 1. Passer ngForm dans ngSubmit dans le template

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form (ngSubmit)="onSubmit(loginForm)">
      <input type="text" name="username" ngModel required>
      <input type="password" name="password" ngModel required>
      <button type="submit" [disabled]="!loginForm.valid">Login</button>
    </form>
  `
})
export class LoginComponent {
  onSubmit(form: NgForm) {
    console.log(form.value);
    // Do login here
  }
}

Le second exemple montre comment utiliser ngForm dans Angular en passant ngForm dans ngSubmit dans le template.

On utilise ngModel pour associer les champs de saisie à des propriétés de notre composant. Ces propriétés contiendront les valeurs saisies par l'utilisateur.

<input type="text" name="username" ngModel required>
<input type="password" name="password" ngModel required>

On utilise la propriété valid de ngForm pour désactiver le bouton de soumission si le formulaire n'est pas valide :

<button type="submit" [disabled]="!loginForm.valid">Login</button>

4. Enfin, on utilise ngSubmit pour gérer l'événement de soumission du formulaire, et on passe ngForm en argument de la méthode onSubmit :

<form (ngSubmit)="onSubmit(loginForm)">

Quelle est la différence entre la ngSubmit et submit ?

La directive ngSubmit est une directive d'événement Angular qui est utilisée pour détecter la soumission d'un formulaire. Elle est déclenchée lorsque l'utilisateur clique sur le bouton de soumission du formulaire ou appuie sur la touche "Entrée" lorsqu'un champ de formulaire a le focus.

Voici comment utiliser la directive ngSubmit dans un template HTML :

<form (ngSubmit)="onSubmit()">
  <!-- Champs de formulaire ici -->
  <button type="submit">Envoyer</button>
</form>

La propriété submit est une propriété de l'objet HTMLFormElement qui représente le formulaire dans le DOM (Document Object Model). Elle peut être utilisée pour soumettre le formulaire de manière programmatique en utilisant JavaScript.

Voici comment utiliser la propriété submit dans du code JavaScript :

const form = document.querySelector('form');
form.submit();

Dans un projet Angular, il est recommandé d'utiliser la directive ngSubmit plutôt que la propriété submit. En effet, la directive ngSubmit est spécifique à Angular et est conçue pour fonctionner de manière intégrée avec les autres composants et fonctionnalités d'Angular, tels que les formulaires avec ngForm et la gestion des données avec ngModel.

Utiliser la directive ngSubmit vous permet de déclarer une méthode de soumission de formulaire dans votre composant Angular, ce qui vous permet de traiter les données du formulaire de manière centralisée et structurée. Cela vous évite également d'avoir à manipuler le DOM ou à écrire du code JavaScript "brut" pour gérer la soumission du formulaire.

5. Enfin, dans la méthode onSubmit, on utilise la propriété value de ngForm pour accéder aux données du formulaire :

onSubmit(form: NgForm) {
    console.log(form.value);
    // Do login here
}

Solution 2. Utiliser @ViewChild :

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" [disabled]="!loginForm.valid">Login</button>
    </form>
  `
})
export class LoginComponent {
  @ViewChild('loginForm') loginForm!: NgForm;

  onSubmit() {
    console.log(this.loginForm.value);
    // Do login here
  }
}

1. On utilise la décorateur @ViewChild pour récupérer une référence à notre formulaire dans le composant en utilisant la propriété #loginForm="ngForm" dans la balise form.

<form #loginForm="ngForm" (ngSubmit)="onSubmit()">

2. Enfin, dans la méthode onSubmit, on utilise la propriété value de notre référence pour accéder aux données du formulaire :

onSubmit() {
    console.log(this.loginForm.value);
    // Do login here
}

Solution 1 ou 2 ?

Il n'y a pas vraiment de "meilleure" solution entre les deux exemples car cela dépend des besoins spécifiques de l'application. Les deux solutions sont valides et peuvent être utilisées en fonction des besoins de l'application.

L'utilisation de @ViewChild dans le premier exemple est utile lorsque vous avez besoin d'accéder à des propriétés spécifiques de ngForm dans le composant. Cela permet de simplifier l'accès aux données du formulaire et de vérifier la validité du formulaire directement à partir de la référence de ngForm.

D'autre part, Passer ngForm dans ngSubmit dans le template est plus simple à utiliser dans les scénarios où vous avez besoin d'accéder aux données du formulaire uniquement lors de la soumission. Cela permet de passer des données supplémentaires avec le formulaire lors de la soumission.