¿Cuáles son las diferencias prácticas entre las formas reactivas y basadas en plantillas?


157

He estado leyendo sobre la nueva API de formularios de Angular2 y parece que hay dos enfoques en los formularios, uno es formularios basados ​​en plantillas y otro son formularios reactivos o modelos.

Me gustaría saber la diferencia práctica entre los dos, no la diferencia en la sintaxis (obviamente) sino los usos prácticos y qué enfoque se beneficia más en diferentes escenarios. Además, ¿hay un aumento de rendimiento al elegir uno sobre el otro? Y si es así, ¿por qué?


3
Otro punto a considerar es que la forma reactiva es síncrona y la forma impulsada por plantilla es asíncrona. Ambas formas tienen sus propias debilidades y fortalezas, por lo que es necesario considerar un par de cosas antes de elegir qué forma usar en su aplicación, por ejemplo. complejidad de la aplicación, etc. También puede usar ambos formularios en la aplicación.
Vijay Singh

Respuestas:


171

Características de formularios controlados por plantilla

  • Fácil de usar
  • Adecuado para escenarios simples y falla para escenarios complejos
  • Similar a AngularJS
  • Enlace de datos bidireccional (usando [(NgModel)] sintaxis)
  • Código de componente mínimo
  • Seguimiento automático del formulario y sus datos (manejado por Angular)
  • Las pruebas unitarias son otro desafío

Características de los formularios reactivos

  • Más flexible, pero necesita mucha práctica.
  • Maneja cualquier escenario complejo
  • No se realiza ningún enlace de datos (modelo de datos inmutable preferido por la mayoría de los desarrolladores)
  • Más código de componente y menos marcado HTML
  • Las transformaciones reactivas pueden hacerse posibles, como
    • Manejo de un evento basado en un tiempo de rebote
    • Manejo de eventos cuando los componentes son distintos hasta que se cambian
    • Agregar elementos dinámicamente
  • Pruebas unitarias más fáciles

1
¿La unidad de prueba sigue siendo aplicable para los formularios controlados por plantilla?
danger89

@ danger89 Creo que sí. La razón por la que las pruebas unitarias son un problema para los formularios controlados por plantillas es porque son cambios de valor y las comprobaciones de validez son asíncronas, lo que puede causar dolores de cabeza cuando se trata de pruebas unitarias.
Alex Lockwood

2
Agregaría la validación de formulario en la mezcla anterior. Las plantillas se validan mediante directivas donde el reactivo es por función
Kieran

11
¿Qué significa exactamente "Maneja cualquier escenario complejo" cuando se refiere a formas reactivas? viniendo de AngularJS, he creado formularios complejos muy bien, así que es difícil para mí ver cómo los formularios impulsados ​​por plantillas "fallan en escenarios complejos"
jtate 12/12/18

@jtate estoy de acuerdo con usted jtate, ¿alguien tiene alguna idea sobre cuál ayuda a mejorar el rendimiento, el tiempo de carga, etc.?
Joel Joseph el

24

Creo que es una discusión sobre código , estrategia y experiencia del usuario .

En resumen, cambiamos por un enfoque basado en plantillas que es más fácil de trabajar con él, a reactivo (en un enfoque basado en modelos) para darnos más control , lo que resulta en una mejor forma comprobable al aprovechar un desacoplamiento entre el HTML (diseño / El equipo de CSS puede trabajar aquí) y las reglas comerciales de los componentes (miembros especialistas en angular / js) y para mejorar la experiencia del usuario con características como transformaciones reactivas, validaciones correlacionadas y manejar escenarios complejos como reglas de validación de tiempo de ejecución y duplicación de campos dinámicos.

Este artículo es una buena referencia al respecto: Formularios Angular 2 : enfoques basados ​​en plantillas y en modelos


24

Aquí está el resumen de la comparación entre la plantilla impulsada y las formas reactivas explicadas por DeborahK (Deborah Kurata) bien, ingrese la descripción de la imagen aquí


3

Formas reactivas:

  • reutilizable
  • más robusto,
  • comprobable
  • más escalable

Formas basadas en plantillas:

  • fácil de agregar,
  • menos escalable
  • requisitos básicos de forma

En resumen , si los formularios son muy importantes para su aplicación, o se usan patrones reactivos en su aplicación, debe usar formularios reactivos . De lo contrario, su aplicación tiene requisitos básicos y simples para formularios como iniciar sesión, debe usar formularios basados ​​en plantillas .

Hay un enlace oficial angular


0

La forma más fácil de conocer la diferencia entre los formularios reactivos y los formularios basados ​​en plantillas

Puedo decir que si quieres más control y escalabilidad, ve con formas reactivas

ingrese la descripción de la imagen aquí


0

Formas controladas por plantilla:

importado usando FormsModule

Los formularios creados con la directiva ngModel solo se pueden probar en una prueba de extremo a extremo porque esto requiere la presencia de un DOM

El valor del formulario estaría disponible en dos lugares diferentes: el modelo de vista, es decir, ngModel

Validación de formulario, a medida que agregamos más y más etiquetas de validación a un campo o cuando comenzamos a agregar validaciones complejas de campo cruzado, la legibilidad del formulario disminuye

Formas reactivas

Generalmente se puede usar para aplicaciones a gran escala

lógica de validación compleja es en realidad más simple de implementar

importado usando ReactiveFormsModule

El valor del formulario estaría disponible en dos lugares diferentes: el modelo de vista y el FormGroup

Prueba fácil de unidad: podemos hacerlo simplemente instanciando la clase, estableciendo algunos valores en los controles del formulario y realizando afirmaciones contra el estado válido global del formulario y el estado de validez de cada control.

Uso de observables para programación reactiva

Por ejemplo: un campo de contraseña y un campo de confirmación de contraseña deben ser idénticos

Forma reactiva: solo necesitamos escribir una función y conectarla al FormControl

Forma guiada por plantilla: necesitamos definir una directiva y de alguna manera pasarle el valor de los dos campos

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.