Cet article suppose que vous avez au moins une connaissance de base d'Angular et spécialement des formulaires sur Angular.
Les formulaires sont un élément central voire clé lorsqu'il s'agit de créer des applications. Nous l'utilisons tous les jours, pour nous connecter, soumettre des données, publier une demande, etc. Sur Angular, nous avons deux façons principales de gérer les formulaires: le formulaire réactif et le formulaire piloté par modèle. Les deux sont utiles en fonction du cas d'utilisation.
Dans les lignes suivantes je vais vous expliquer cinq raisons pour lesquelles vous devez utiliser les formulaires réactifs au lieu des formulaires basés sur des modèles dans Angular.
Sorry for the interrupt!
If you're interested in learning Angular in a comprehensive way, I highly recommend this bestseller course: Angular - The Complete Guide (2020 Edition)
It's an affiliate link, so by purchasing, you support the blog at the same time.1. Immuabilité
La formulaire réactive garde le modèle de données pur en le fournissant comme une structure de données immuable. Il utilise une approche immuable pour gérer l'état d'un formulaire. En d'autres termes, il ne modifie pas l'état du formulaire. Chaque fois qu'un changement se produit sur le formulaire, l'instance FormControl ne mettra pas à jour le modèle de données existant, elle renverra un nouvel état (un nouveau modèle de données). Le formulaire réactif utilise des opérateurs observables pour renvoyer un nouveau modèle de données. De cette façon, il maintiendra toujours l'intégrité du modèle entre les modifications.
Pour le formulaire basé sur un modèle, il utilise l'approche mutable. En raison du fait qu'il s'appuie fortement sur la liaison de données bidirectionnelle avec ngModel pour mettre à jour le modèle de données dans le composant suite aux modifications apportées sur le modèle.
2. Prévisibilité
Le formulaire réactif est prévisible car il accède de manière synchrone au modèle de données. Les formulaires réactifs sont construits autour de flux observables, où les entrées et les valeurs des formulaires sont fournies sous forme de flux de valeurs d'entrée, accessibles de manière synchrone. Il utilise également des flux observables pour suivre les modifications du formulaire. Et cette prévisibilité facilite les tests.
Le formulaire basé sur un modèle est asynchrone et donc imprévisible.
3. Flux de données structuré
La directive de formulaire pilotée par modèle ngModel est responsable de la création et de la gestion de l'instanceFormControl pour un élément de formulaire donné. Accès au formulaire réactif directement à l'instance FormControl après la création du lien avecFormControlDirective du fait que le formulaire réactif est dirigé par la classe de composants. Et par conséquent, chaque élément de la vue (modèle) est lié au FormControl (modèle de formulaire). Et lorsqu'un changement se produit et qu'une mise à jour de la vue est nécessaire, il ne restituera pas le DOM car le formulaire réactif est synchrone et ne dépend pas du rendu de l'interface utilisateur.
Avec les formulaires basés sur des modèles, chaque élément du formulaire est lié à une directive qui gère le modèle du formulaire en interne.
4. Évolutivité
Le fait que le formulaire réactif soit synchrone facilite la mise à l'échelle. Il est réutilisable et aide beaucoup avec les formulaires à grande échelle. Le formulaire piloté par modèle n'est pas réutilisable car il fournit un accès asynchrone au modèle du formulaire et, par conséquent, son évolutivité est difficile.
5. Test
Dans une petite application Angular, les tests ne sont pas obligatoires. Mais lorsque vous travaillez dans une application plus grande ou plus complexe, il devient évident de la tester avant la production. Et les formulaires réactifs sont plus faciles à tester que les formulaires basés sur les modèles. Parce qu'il fournit un accès synchrone au formulaire et aux modèles de données, et qu'il peut être testé sans afficher le rendu de l'interface utilisateur.
Les formulaires basés sur des modèles nécessitent une meilleure connaissance du processus de détection des modifications et une compréhension de la façon dont les directives s'exécutent à chaque cycle pour garantir que les éléments soient interrogés, testés ou modifiés au bon moment.
Conclusion
Les formulaires réactifs et basés sur des modèles sont utiles et différents à bien des égards. Dans un très petit formulaire, utiliser un formulaire basé sur un modèle est préférable car il est très facile à configurer. Mais dans le cas où les formulaires deviennent un élément clé de votre application, l'utilisation d'un formulaire réactif est nécessaire car il est plus prévisible, réutilisable, évolutif et testable.
