Formulaires Angular : reactive form ou driven form ?

Dans cet article, nous allons comparer les deux types de formulaires proposés par Angular (Reactive Form et Driven Form) pour vous aider à trouver quel type de formulaire Angular est le plus adapté à votre besoin !

En effet, dans la majorité des applications, on se retrouve souvent à développer un ou plusieurs formulaires, et certains sont plus complexes que d’autres. Ainsi, AngularAngular est un framework de développement JavaScript populaire basé sur TypeScript. nous propose plusieurs approches pour les mettre en place :

• Les formulaires réactifs : reactive forms
• Les formulaires dirigés par le template : template driven forms

Nous allons voir ces deux méthodes un peu plus en détail et les illustrer grâce à des exemples.

Comparatif des différents types de formulaires Angular

La première chose à savoir est que ces deux approches sont incompatibles entre elles. On ne peut pas utiliser à la fois un template driven form (ngmodel) et un reactive form. Vous vous en doutez, les deux types de formulaires ont chacun leurs points forts et leurs points faibles.

Le premier type de formulaire Angular : les template driven forms

Très simple à mettre en place, les template driven permettent d’utiliser la directive ngModel pour binder une variable à un champ du formulaire et ainsi maintenir les objets à jour.

Allez, un exemple !

On doit importer le FormModule pour pouvoir utiliser ces formulaires.

@NgModule ({
    imports:[
        // ...
        FormModule
    ]
})
export class AppModule { }

À présent, nous allons utiliser la directive ngModel pour lier une personne à notre form. On peut noter que les champs sont required. Le contrôle des valeurs se fait grâce à des directives. Angular en propose certaines par défaut mais pour des contrôles plus complexes, on peut créer ses propres directives.

<form (submit)="submit()" #profileForm>
  <label>
    First Name : <input [name]="’firstName’"
                        [(ngModel)]="person.firstName" required/>
  </label>
  <label>
    Last Name : <input [name]="’lastName’"
                       [(ngModel)]="person.lastName" required />
  </label>

  <button type="submit" [disabled]="!profileForm.checkValidity()">Submit</button>
</form>

Et voilà !

Les champs du formulaire sont automatiquement affectés à la person, et les règles de validation désactivent le bouton submit lorsque les champs sont vides.

Les templates driven forms sont donc très simples à mettre en place et rapides à utiliser.

Le second type de formulaire Angular : les reactive forms

Comme nous le disions plus haut, les deux types de formulaires ne doivent pas être utilisés ensemble. C’est pourquoi nous devons importer un autre module.

@NgModule({
  imports: [
    // ...
    ReactiveFormsModule,
  ],
})
export class AppModule { }

Pour les formulaires réactifs, ou reactive forms, nous avons besoin de définir des formControls pour chaque champ. Ces définitions sont plus longues à écrire que de simples ngModel mais permettent de regrouper plus facilement les validations, d’en ajouter ou d’en supprimer à la volée. On a aussi une vision plus claire du formulaire qui est indépendante de la forme qu’on lui donne en html.

Parmi les avantages des reactive forms Angular, on peut citer la facilité de maintenance de ces formulaires une fois qu’ils sont mis en place.

Il faut aussi noter que les données du formulaire sont immuables, ce qui signifie qu’un nouvel objet est retourné à chaque fois qu’on le modifie. Les données de l’objet de départ n’étant pas modifiées, les annulations et toutes sortes de retour à un état antérieur sont bien plus faciles à mettre en oeuvre.

Voici un exemple :

  // Défnition des FormGroup / FormControl
  profileForm: FormGroup = this.fb.group({
    firstName: [’’, Validators.compose([Validators.required])],
    lastName: [’’, Validators.compose([Validators.required])],
  });

  constructor(private fb: FormBuilder) {
  }

<form [formGroup]="profileForm" (submit)="submit()">
  <label>
    First Name : <input [formControlName]="’firstName’" />
  </label>
  <label>
    Last Name : <input [formControlName]="’lastName’" />
  </label>

  <button type="submit" [disabled]="!profileForm.valid">Submit</button>
</form>

Mais alors, quel formulaire Angular dois-je choisir ?

Comme on l’a vu, les deux approches sont assez différentes et ne répondent pas aux mêmes problématiques.

Les ngModels, ou driven forms, vont être très bien adaptés à des formulaires simples, n’ayant pas besoin de validation sans gestion d’erreur ou de gestion, comme des formulaires de login ou de contact.

Si le formulaire devient complexe, contient de nombreux champs, des validations spécifiques ou qu’il va être amené à être réutilisé, les reactive forms sont alors la meilleure option !