Angular : concevoir des supers formulaires typés

Aujourd’hui, on va parler formulaire !

Ce n’est plus vraiment une nouveauté, les formulaires typés ont été introduits dans Angular 14, version sortie en juin 2022, soit il y a une éternité. Trop occupé sur les nouveaux standalone components, je n’avais pas trop regardé cette feature en détail. On y va ?

Imaginons une représentation très classique d’un utilisateur.

‍

Certains champs sont inutiles pour la création d’un utilisateur, mais bon, on ne va pas copier / coller pour créer un nouveau type, non ? (Vous ne faites pas ça chez vous, non ? )

‍

Jusque là, rien de fou, un peu de Utility Type, mais je ne parle toujours pas de formulaire !

‍

Avant Angular 14

Il existe plusieurs manières de gérer les formulaires en Angular : l’approche template et l’approche réactive. Et on ne va pas parler de l’approche template.

Avec l’approche réactive, on conçoit nos formulaires dans le code du contrôleur :

‍

Avec Angular 14, tout vos “vieux” formulaires ont été typés à l’aide des de UntypedFormGroup et de UntypedFormControl

‍

On peut également assigner à chaque contrôle des règles de gestions (Validators), une valeur par défaut, … Grâce aux méthodes de FormControl, on peut également surveiller l’état de chaque champ et réagir en cas de modification par l’utilisateur. Mais jusque-là, il manquait un peu de typage dans nos formulaires.

La nature étant bien faite, tant que nous prenons soin de nous assurer que notre formulaire produisait un contenu dont l’interface est conforme, il est possible de faire quelque chose comme ça :

‍

Mais est-il possible d’aller plus loin ? Que le compilateur nous signale que le type a été modifié par une nouvelle feature et qu’il faille modifier notre formulaire ?

‍

Angular 14 : les formulaires typés

Il est maintenant possible de typer nos FormGroup et nos FormControl !

‍

Oui, ce n’est peut-être pas aussi magique, FormGroup attend une interface de type [key] : FormControl !

Heureusement, grâce à Typescript et aux Utility Types, nous n’avons pas besoin de créer cette vilaine classe :

‍

Car serait dommage de ne pas utiliser notre type CreateUser, non ?

‍

Cette forme littérale permet de créer un type à partir d’un type T. On précise alors que pour chaque propriété de T, on attend une propriété qui sera de type FormControl .

En pratique, voilà le résultat :

‍

Maintenant, le compilateur typescript nous indique que notre formulaire est incorrect : il n’implémente pas le type défini.

Mais il est possible d’aller plus loin, car nous n’avons pas typé FormControl !

Ce n’est pas plus compliqué, il faut juste savoir comment l’écrire :

‍

Ici, la valeur ‘supra_admin’ n’est pas acceptée car elle ne fait pas partie du type UserRole. Puissant, non ?

‍

Oui, mais comment je fais si j’ai des objets complexes ?

Imaginons un type formulaire un peu complexe, avec des sous-objets :

‍

Dans ce cas, avec le type Form<T> que nous avons écrit plus haut, nous avons ce résultat :

‍

Mais nous voudrions plutôt avoir ce genre de représentation :

‍

Il va falloir introduire un peu de récursivité dans notre type Form<T>

‍

Record est également un type utilitaire bien pratique.

En résumé, avec un peu de Typescript et avec cette possibilité proposée par Angular, il est possible de rendre nos formulaire réactifs le plus intelligent possible et d’y ajouter la validation du compilateur.

‍

En conclusion

Cette fonctionnalité mérite vraiment de s’y intéresser ! Avec une bonne gestion des types, elle accompagne vraiment le travail des développeurs et va vous faciliter la vie.

Je n’ai pas abordé ici certain sujets (FormRecord, FormArray, FormBuilder) qui permettent d’aller un peu plus loin et que je vous conseille grandement de regarder si vous voulez devenir un maître des formulaires Angular !