[MUSIC]
Acabamos de terminar de aprender sobre formularios impulsados por plantillas en
angular en la lección anterior.
Angular también admite otra forma de diseñar formas llamadas como formas reactivas,
las formas reactivas usan el estilo reactivo de programación para apoyar formas.
Hablaremos brevemente de la programación reactiva en
una de las lecciones posteriores de este módulo.
Pero ahora mismo, trataremos con formas reactivas y
veremos cómo podemos diseñar formas reactivas en angular y
cuáles son las características únicas de hacer formas reactivas en angular siguiente.
El estilo reactivo de la programación aboga por la gestión explícita de los datos
que fluyen entre el modelo de datos no UI y el modelo de formulario
orientado a UI-orientado y este es el enfoque que las formas reactivas toman en Angular.
Ahora eso podría no tener mucho sentido para ustedes en este momento, pero a medida que completemos este ejercicio
y la conferencia, se volverá aún más claro para ustedes
por qué el enfoque reactivo se adapta a ese diseño de forma en ciertos contextos.
Ahora, en el enfoque reactivo, creamos un árbol de objetos de control de forma
angulares, dentro de la clase de componente.
Ahora en los formularios impulsados por plantillas que ha visto anteriormente,
diseñamos los formularios usando el enfoque de plantilla HTML, por lo que
todos los controles de formulario que se ponen en ese formulario en la plantilla HTML y
estamos principalmente gestionando datos y estamos vinculados a su objeto componente
a través del NG modelo directamente.
En este enfoque, crearemos esa estructura de formulario en nuestro componente y
luego vincularemos la estructura de formulario en controles firmes en nuestra plantilla, por lo que
enlazaremos el árbol de formularios que
creamos dentro de nuestra clase de componente a la forma nativa
elementos dentro de nuestro archivo de plantilla allí.
Entonces, en este enfoque, la clase de componente tiene acceso
inmediato tanto al modelo de datos como a la estructura de control de formularios y así
podemos tomar el modelo de datos e insertarlo en la estructura de control de formularios y
correspondientemente sacar la información de la estructura de control de formularios y
luego asignarlo al modelo de datos.
Así que el modelo de datos que viene desde el back-end se puede mapear en forma de estructura de control
que se refleja en la vista a través de esa plantilla
y el puente entre ellos se realiza dentro de la clase de componente
mediante la creación de la estructura de formulario dentro de la clase de componente.
Ahora, esto no tiene mucho sentido para usted en este momento, pero
cuando hagamos el ejercicio, se volverá aún más claro para usted cómo se puede lograr este enlace
entre el modelo de datos y la estructura de control firme
dentro de la clase de componente en el código de script de tipo del clase de componentes.
Así que aquí es donde vamos a aprovechar patrones reactivos, pruebas y validación
para gran ventaja, por lo que este enfoque de forma
reactiva apoya patrones reactivos de programación, como he dicho, hablaremos
programación reactiva un poco más tarde en este módulo.
Además, el hecho de que creamos los formularios en el código
significa que probar y evaluar formularios se vuelve mucho más fácil.
Los formularios impulsados por plantillas son muy difíciles de probar
porque gran parte de la estructura está en el código de la plantilla, por lo que
el enfoque reactivo se presta mucho mejor para las pruebas unitarias y
también para la validación de formularios, como veremos un poco más adelante en el ejercicio.
Reflexionemos brevemente sobre algunas de las ventajas de usar formas reactivas.
Una de las ventajas es que los valores en la forma en que los elementos
están inmediatamente disponibles y sincronizados con el código abstracto.
En la forma impulsada por plantilla toma ciclo para
cualquier cambio escrito la plantilla para que se refleje en su código allí,
pero en el enfoque reactivo, el bit de sincronización, los datos y
la vista se mantiene estrechamente.
En segundo lugar, las formas reactivas, como ya mencioné,
son más fáciles de hacer pruebas unitarias y esto se vuelve muy crucial
cuando se está diseñando un ángulo muy complejo replicaciones.
Los formularios reactivos son compatibles con algunas clases
que están disponibles para la biblioteca de formularios angulares.
Uno de ellos es la clase FormControl que potencia el control de formulario individual es
que incluimos en nuestra forma los elementos individuales y también nos permite
rastrear el valor de esos límites y hacer la validación de esos elementos.
FormGroup es un grupo de FormControl, por lo que
cuando desea organizar FormControls juntos como un grupo y
luego realizar un seguimiento de la información sobre esos grupos como un todo, entonces FormGroup
le permite agrupar un grupo de FormControls juntos.
Además, también tenemos una clase AbstractControl que es un resumenClase basada en
para las clases FormControl, que también se puede utilizar para nuestra ventaja
aunque queremos verlas específicamente en el ejercicio más adelante,
pero volveremos a usarlas en un momento posterior.
Y también tenemos una clase FormArray que le permite definir
una matriz indexada numéricamente de instancias de AbstractControl,
de nuevo, tanto AbstractControl como FormArray, no examinaremos explícitamente
en esta lección en particular, pero las veremos más adelante en el curso.
Otro aspecto interesante de las formas reactivas
es la disponibilidad de FormBuilder.
La clase FormBuilder permite el uso para crear los formularios dentro de nuestro código TypeScript y
luego ser capaz de vincularlos con esa plantilla de controles allí.
Así que para usar la clase Form Builder, importa el Form Builder desde los formularios angulares
y luego allí después de que pueda usar el Form Builder para construir el formulario,
como si usa y hace que sus clases de Convertidor de Form y el grupo Form
clases como hemos visto en la diapositiva anterior ese código es un poco más elaborado.
Pero usando la clase FormBuilder, reduce la repetición inclítica de en su código
y lo hace mucho más compacto para definir fuentes.
Vamos a utilizar la clase FormBuilder como el enfoque para
formularios de construcción en el ejercicio que sigue y
este ejemplo se deriva del ejercicio que va a hacer justo después de esta conferencia.
Así que aquí se puede ver que hemos construido un formulario, como grupo de estos elementos de control de formulario
y cada uno de ellos tiene un nombre específico y también el valor dado a ellos.
Al crear el modelo de formulario en nuestro código mecanografiado,
no rellena automáticamente el modelo de formulario, necesita rellenar exclusivamente
el modelo de formulario, especialmente si obtiene los datos en un modelo de datos,
entonces el modelo de datos necesita ser mapeado en su modelo de formulario para llenar los valores,
por lo que el y el modelo de datos se mantienen separados en formas reactivas.
En los formularios controlados por plantilla vio que estamos tratando directamente en los datos
objetos desde el archivo de plantilla a nuestro código abstracto.
Entonces, en este caso, el formulario y el modelo de datos se mantienen separados, por lo que
cualquier cambio que realice en los elementos DOM
en su formulario fluirá en el modelo de formulario y
tendrá que reflejar explícitamente los datos del formulario de nuevo a
ese modelo de datos incluso a través de un servicio o cualquier medio que elija,
por lo que esta separación nos ayuda a diseñar nuestro código mucho mejor, como veremos más adelante.
Hay dos métodos disponibles para rellenar un modelo de formulario a partir de un modelo de datos.
Tenemos el método setValue (), que nos permite asignar cada control de formulario
a un valor particular del modelo de datos o tenemos un patchValue (),
que le permite actualizar sólo algunos controles dentro de su modelo de formulario.
Así que una vez que obtenga el modelo de datos desde el back-end, desde el modelo de datos,
puede parchear los valores en su modelo de formulario o asignar los valores de
su modelo de datos en su modelo de formulario, muy a menudo, crearemos el modelo de datos,
que refleja razonablemente la estructura del formulario.
En el ejercicio que sigue verá que tengo un modelo de datos
que se basa en una clase,
que refleja muy de cerca el modelo de formulario que usamos dentro de nuestro ejemplo allí.
Con esta rápida comprensión de las formas reactivas, pasemos ahora al ejercicio
donde doblaremos una forma reactiva dentro de nuestra aplicación angular y
a lo largo del camino consolidaremos parte de la terminología y
también algunas de las ideas que acabamos de explorar en esta lección.
[MÚSICA]