Quelles sont les différences pratiques entre les formulaires basés sur des modèles et les formulaires réactifs?

J'ai lu à propos de la nouvelle API de formulaires Angular2 et il semble qu'il existe deux approches sur les formulaires, l'une est les formulaires pilotés par modèle, l'autre est les formulaires réactifs ou pilotés par modèle.

Je voudrais connaître la différence pratique entre les deux, non pas la différence de syntaxe (évidemment) mais les utilisations pratiques et quelle approche profite le plus dans différents scénarios. En outre, y a-t-il un gain de performance à choisir l'un par rapport à l'autre? Et si oui, pourquoi?

Fonctionnalités des formulaires pilotés par des modèles

• Facile à utiliser
• Convient pour les scénarios simples et échoue pour les scénarios complexes
• Similaire à AngularJS
• Liaison de données bidirectionnelle (à l'aide de la [(NgModel)]syntaxe)
• Code de composant minimal
• Suivi automatique du formulaire et de ses données (géré par Angular)
• Les tests unitaires sont un autre défi

Fonctionnalités des formulaires réactifs

• Plus flexible, mais nécessite beaucoup de pratique
• Gère tous les scénarios complexes
• Aucune liaison de données n'est effectuée (modèle de données immuable préféré par la plupart des développeurs)
• Plus de code de composant et moins de balisage HTML
• Des transformations réactives peuvent être rendues possibles telles que
  • Gérer un événement en fonction d'un temps anti-rebond
  • Gestion des événements lorsque les composants sont distincts jusqu'à ce qu'ils soient modifiés
  • Ajouter des éléments dynamiquement
• Tests unitaires plus faciles

Je pense que c'est une discussion sur le code , la stratégie et l'expérience utilisateur .

En résumé, nous passons à une approche basée sur un modèle qui est plus facile à utiliser , à une approche réactive (dans une approche basée sur un modèle) pour nous donner plus de contrôle , ce qui se traduit par une meilleure forme testable en tirant parti d'un découplage entre le HTML (conception / L'équipe CSS peut travailler ici) et les règles métier des composants (membres spécialistes angular / js) et pour améliorer l'expérience utilisateur avec des fonctionnalités telles que les transformations réactives, les validations corrélées et gérer des scénarios complexes comme les règles de validation d'exécution et la duplication de champs dynamiques.

Cet article est une bonne référence à ce sujet: Formes angulaires 2 - Approches pilotées par modèle et par modèle

Voici le résumé de la comparaison entre les formes pilotées par modèle et réactives expliquées par DeborahK (Deborah Kurata) bien,

Formes réactives:

• réutilisable,
• plus robuste,
• testable,
• plus évolutif

Formulaires basés sur des modèles:

• facile à ajouter,
• moins évolutif,
• exigences de base du formulaire

Dans les résumés , si les formulaires sont très importants pour votre application ou si un modèle réactif est utilisé dans votre application, vous devez utiliser des formulaires réactifs.Sinon, votre application a des exigences de base et simples pour les formulaires tels que la connexion, vous devez utiliser des formulaires basés sur des modèles .

Il y a un lien officiel angulaire

Le moyen le plus simple de connaître la différence entre les formulaires réactifs et les formulaires basés sur des modèles

Je peux dire que si vous voulez plus de contrôle et d'évolutivité, optez pour les formulaires réactifs

Formulaires basés sur des modèles:

importé à l'aide de FormsModule

Les formulaires créés avec la directive ngModel ne peuvent être testés que dans un test de bout en bout car cela nécessite la présence d'un DOM

La valeur du formulaire serait disponible à deux endroits différents: le modèle de vue, c'est-à-dire ngModel

Validation de formulaire, à mesure que nous ajoutons de plus en plus de balises de validation à un champ ou lorsque nous commençons à ajouter des validations croisées complexes, la lisibilité du formulaire diminue

Formes réactives:

Peut généralement être utilisé pour des applications à grande échelle

la logique de validation complexe est en fait plus simple à mettre en œuvre

importé à l'aide de ReactiveFormsModule

La valeur du formulaire serait disponible à deux endroits différents: le modèle de vue et le FormGroup

Test unitaire facile: nous pouvons le faire simplement en instanciant la classe, en définissant certaines valeurs dans les contrôles de formulaire et en effectuant des assertions par rapport à l'état de validité global de la forme et à l'état de validité de chaque contrôle.

Utilisation d'observables pour la programmation réactive

Par exemple: un champ de mot de passe et un champ de confirmation de mot de passe doivent être identiques

Manière réactive: il suffit d'écrire une fonction et de la brancher dans le FormControl

Template-Driven Way: nous devons définir une directive et lui transmettre d'une manière ou d'une autre la valeur des deux champs

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/