1
00:00:00,000 --> 00:00:04,438
[MUSIC]

2
00:00:04,438 --> 00:00:08,934
Acabamos de terminar de aprender sobre formularios impulsados por plantillas en

3
00:00:08,934 --> 00:00:12,310
angular en la lección anterior.

4
00:00:12,310 --> 00:00:18,336
Angular también admite otra forma de diseñar formas llamadas como formas reactivas,

5
00:00:18,336 --> 00:00:25,390
las formas reactivas usan el estilo reactivo de programación para apoyar formas.

6
00:00:25,390 --> 00:00:28,050
Hablaremos brevemente de la programación reactiva en

7
00:00:28,050 --> 00:00:31,110
una de las lecciones posteriores de este módulo.

8
00:00:31,110 --> 00:00:34,180
Pero ahora mismo, trataremos con formas reactivas y

9
00:00:34,180 --> 00:00:38,410
veremos cómo podemos diseñar formas reactivas en angular y

10
00:00:38,410 --> 00:00:44,430
cuáles son las características únicas de hacer formas reactivas en angular siguiente.

11
00:00:46,150 --> 00:00:52,310
El estilo reactivo de la programación aboga por la gestión explícita de los datos

12
00:00:52,310 --> 00:00:58,500
que fluyen entre el modelo de datos no UI y el modelo de formulario

13
00:00:58,500 --> 00:01:04,280
orientado a UI-orientado y este es el enfoque que las formas reactivas toman en Angular.

14
00:01:04,280 --> 00:01:09,240
Ahora eso podría no tener mucho sentido para ustedes en este momento, pero a medida que completemos este ejercicio

15
00:01:09,240 --> 00:01:14,860
y la conferencia, se volverá aún más claro para ustedes

16
00:01:14,860 --> 00:01:21,530
por qué el enfoque reactivo se adapta a ese diseño de forma en ciertos contextos.

17
00:01:21,530 --> 00:01:26,630
Ahora, en el enfoque reactivo, creamos un árbol de objetos de control de forma

18
00:01:26,630 --> 00:01:30,810
angulares, dentro de la clase de componente.

19
00:01:30,810 --> 00:01:33,300
Ahora en los formularios impulsados por plantillas que ha visto anteriormente,

20
00:01:34,450 --> 00:01:38,870
diseñamos los formularios usando el enfoque de plantilla HTML, por lo que

21
00:01:38,870 --> 00:01:44,075
todos los controles de formulario que se ponen en ese formulario en la plantilla HTML y

22
00:01:44,075 --> 00:01:49,667
estamos principalmente gestionando datos y estamos vinculados a su objeto componente

23
00:01:49,667 --> 00:01:55,770
a través del NG modelo directamente.

24
00:01:55,770 --> 00:02:01,280
En este enfoque, crearemos esa estructura de formulario en nuestro componente y

25
00:02:01,280 --> 00:02:06,220
luego vincularemos la estructura de formulario en controles firmes en nuestra plantilla, por lo que

26
00:02:06,220 --> 00:02:10,860
enlazaremos el árbol de formularios que

27
00:02:10,860 --> 00:02:15,920
creamos dentro de nuestra clase de componente a la forma nativa

28
00:02:15,920 --> 00:02:20,910
elementos dentro de nuestro archivo de plantilla allí.

29
00:02:20,910 --> 00:02:25,530
Entonces, en este enfoque, la clase de componente tiene acceso

30
00:02:25,530 --> 00:02:30,390
inmediato tanto al modelo de datos como a la estructura de control de formularios y así

31
00:02:30,390 --> 00:02:36,575
podemos tomar el modelo de datos e insertarlo en la estructura de control de formularios y

32
00:02:36,575 --> 00:02:40,985
correspondientemente sacar la información de la estructura de control de formularios y

33
00:02:40,985 --> 00:02:43,355
luego asignarlo al modelo de datos.

34
00:02:43,355 --> 00:02:48,355
Así que el modelo de datos que viene desde el back-end se puede mapear en forma de estructura de control

35
00:02:48,355 --> 00:02:53,410
que se refleja en la vista a través de esa plantilla

36
00:02:54,550 --> 00:02:58,280
y el puente entre ellos se realiza dentro de la clase de componente

37
00:02:58,280 --> 00:03:02,660
mediante la creación de la estructura de formulario dentro de la clase de componente.

38
00:03:02,660 --> 00:03:07,330
Ahora, esto no tiene mucho sentido para usted en este momento, pero

39
00:03:07,330 --> 00:03:12,230
cuando hagamos el ejercicio, se volverá aún más claro para usted cómo se puede lograr este enlace

40
00:03:12,230 --> 00:03:17,080
entre el modelo de datos y la estructura de control firme

41
00:03:17,080 --> 00:03:22,185
dentro de la clase de componente en el código de script de tipo del clase de componentes.

42
00:03:22,185 --> 00:03:26,700
Así que aquí es donde vamos a aprovechar patrones reactivos, pruebas y validación

43
00:03:26,700 --> 00:03:31,160
para gran ventaja, por lo que este enfoque de forma

44
00:03:31,160 --> 00:03:35,170
reactiva apoya patrones reactivos de programación, como he dicho, hablaremos

45
00:03:35,170 --> 00:03:39,880
programación reactiva un poco más tarde en este módulo.

46
00:03:40,900 --> 00:03:45,470
Además, el hecho de que creamos los formularios en el código

47
00:03:45,470 --> 00:03:50,840
significa que probar y evaluar formularios se vuelve mucho más fácil.

48
00:03:50,840 --> 00:03:54,040
Los formularios impulsados por plantillas son muy difíciles de probar

49
00:03:54,040 --> 00:03:58,770
porque gran parte de la estructura está en el código de la plantilla, por lo que

50
00:03:58,770 --> 00:04:03,800
el enfoque reactivo se presta mucho mejor para las pruebas unitarias y

51
00:04:03,800 --> 00:04:10,150
también para la validación de formularios, como veremos un poco más adelante en el ejercicio.

52
00:04:10,150 --> 00:04:15,650
Reflexionemos brevemente sobre algunas de las ventajas de usar formas reactivas.

53
00:04:15,650 --> 00:04:20,820
Una de las ventajas es que los valores en la forma en que los elementos

54
00:04:20,820 --> 00:04:25,986
están inmediatamente disponibles y sincronizados con el código abstracto.

55
00:04:25,986 --> 00:04:29,990
En la forma impulsada por plantilla toma ciclo para

56
00:04:29,990 --> 00:04:35,510
cualquier cambio escrito la plantilla para que se refleje en su código allí,

57
00:04:35,510 --> 00:04:40,990
pero en el enfoque reactivo, el bit de sincronización, los datos y

58
00:04:40,990 --> 00:04:46,491
la vista se mantiene estrechamente.

59
00:04:46,491 --> 00:04:50,680
En segundo lugar, las formas reactivas, como ya mencioné,

60
00:04:50,680 --> 00:04:55,560
son más fáciles de hacer pruebas unitarias y esto se vuelve muy crucial

61
00:04:55,560 --> 00:05:01,240
cuando se está diseñando un ángulo muy complejo replicaciones.

62
00:05:01,240 --> 00:05:04,320
Los formularios reactivos son compatibles con algunas clases

63
00:05:04,320 --> 00:05:08,240
que están disponibles para la biblioteca de formularios angulares.

64
00:05:08,240 --> 00:05:13,390
Uno de ellos es la clase FormControl que potencia el control de formulario individual es

65
00:05:13,390 --> 00:05:19,350
que incluimos en nuestra forma los elementos individuales y también nos permite

66
00:05:19,350 --> 00:05:24,360
rastrear el valor de esos límites y hacer la validación de esos elementos.

67
00:05:25,500 --> 00:05:29,110
FormGroup es un grupo de FormControl, por lo que

68
00:05:29,110 --> 00:05:32,420
cuando desea organizar FormControls juntos como un grupo y

69
00:05:32,420 --> 00:05:37,700
luego realizar un seguimiento de la información sobre esos grupos como un todo, entonces FormGroup

70
00:05:37,700 --> 00:05:43,240
le permite agrupar un grupo de FormControls juntos.

71
00:05:44,780 --> 00:05:48,850
Además, también tenemos una clase AbstractControl que es un resumenClase basada en

72
00:05:48,850 --> 00:05:53,930
para las clases FormControl, que también se puede utilizar para nuestra ventaja

73
00:05:53,930 --> 00:05:58,500
aunque queremos verlas específicamente en el ejercicio más adelante,

74
00:05:58,500 --> 00:06:02,630
pero volveremos a usarlas en un momento posterior.

75
00:06:05,600 --> 00:06:10,430
Y también tenemos una clase FormArray que le permite definir

76
00:06:10,430 --> 00:06:15,410
una matriz indexada numéricamente de instancias de AbstractControl,

77
00:06:15,410 --> 00:06:19,460
de nuevo, tanto AbstractControl como FormArray, no examinaremos explícitamente

78
00:06:19,460 --> 00:06:24,950
en esta lección en particular, pero las veremos más adelante en el curso.

79
00:06:24,950 --> 00:06:28,070
Otro aspecto interesante de las formas reactivas

80
00:06:28,070 --> 00:06:29,950
es la disponibilidad de FormBuilder.

81
00:06:29,950 --> 00:06:36,925
La clase FormBuilder permite el uso para crear los formularios dentro de nuestro código TypeScript y

82
00:06:36,925 --> 00:06:42,115
luego ser capaz de vincularlos con esa plantilla de controles allí.

83
00:06:42,115 --> 00:06:47,218
Así que para usar la clase Form Builder, importa el Form Builder desde los formularios angulares

84
00:06:47,218 --> 00:06:52,483
y luego allí después de que pueda usar el Form Builder para construir el formulario,

85
00:06:52,483 --> 00:06:57,424
como si usa y hace que sus clases de Convertidor de Form y el grupo Form

86
00:06:57,424 --> 00:07:03,040
clases como hemos visto en la diapositiva anterior ese código es un poco más elaborado.

87
00:07:03,040 --> 00:07:08,180
Pero usando la clase FormBuilder, reduce la repetición inclítica de en su código

88
00:07:08,180 --> 00:07:13,610
y lo hace mucho más compacto para definir fuentes.

89
00:07:13,610 --> 00:07:16,440
Vamos a utilizar la clase FormBuilder como el enfoque para

90
00:07:16,440 --> 00:07:19,760
formularios de construcción en el ejercicio que sigue y

91
00:07:19,760 --> 00:07:26,170
este ejemplo se deriva del ejercicio que va a hacer justo después de esta conferencia.

92
00:07:26,170 --> 00:07:31,320
Así que aquí se puede ver que hemos construido un formulario, como grupo de estos elementos de control de formulario

93
00:07:31,320 --> 00:07:39,100
y cada uno de ellos tiene un nombre específico y también el valor dado a ellos.

94
00:07:39,100 --> 00:07:43,540
Al crear el modelo de formulario en nuestro código mecanografiado,

95
00:07:43,540 --> 00:07:48,030
no rellena automáticamente el modelo de formulario, necesita rellenar exclusivamente

96
00:07:48,030 --> 00:07:51,190
el modelo de formulario, especialmente si obtiene los datos en un modelo de datos,

97
00:07:51,190 --> 00:07:55,280
entonces el modelo de datos necesita ser mapeado en su modelo de formulario para llenar los valores,

98
00:07:55,280 --> 00:08:00,580
por lo que el y el modelo de datos se mantienen separados en formas reactivas.

99
00:08:00,580 --> 00:08:05,340
En los formularios controlados por plantilla vio que estamos tratando directamente en los datos

100
00:08:05,340 --> 00:08:09,990
objetos desde el archivo de plantilla a nuestro código abstracto.

101
00:08:09,990 --> 00:08:12,710
Entonces, en este caso, el formulario y el modelo de datos se mantienen separados, por lo que

102
00:08:12,710 --> 00:08:17,610
cualquier cambio que realice en los elementos DOM

103
00:08:17,610 --> 00:08:22,660
en su formulario fluirá en el modelo de formulario y

104
00:08:22,660 --> 00:08:28,030
tendrá que reflejar explícitamente los datos del formulario de nuevo a

105
00:08:28,030 --> 00:08:33,670
ese modelo de datos incluso a través de un servicio o cualquier medio que elija,

106
00:08:33,670 --> 00:08:39,240
por lo que esta separación nos ayuda a diseñar nuestro código mucho mejor, como veremos más adelante.

107
00:08:40,520 --> 00:08:45,490
Hay dos métodos disponibles para rellenar un modelo de formulario a partir de un modelo de datos.

108
00:08:45,490 --> 00:08:50,280
Tenemos el método setValue (), que nos permite asignar cada control de formulario

109
00:08:50,280 --> 00:08:54,710
a un valor particular del modelo de datos o tenemos un patchValue (),

110
00:08:54,710 --> 00:08:59,360
que le permite actualizar sólo algunos controles dentro de su modelo de formulario.

111
00:08:59,360 --> 00:09:02,970
Así que una vez que obtenga el modelo de datos desde el back-end, desde el modelo de datos,

112
00:09:02,970 --> 00:09:08,030
puede parchear los valores en su modelo de formulario o asignar los valores de

113
00:09:08,030 --> 00:09:13,130
su modelo de datos en su modelo de formulario, muy a menudo, crearemos el modelo de datos,

114
00:09:13,130 --> 00:09:18,740
que refleja razonablemente la estructura del formulario.

115
00:09:18,740 --> 00:09:22,060
En el ejercicio que sigue verá que tengo un modelo de datos

116
00:09:22,060 --> 00:09:24,210
que se basa en una clase,

117
00:09:24,210 --> 00:09:30,030
que refleja muy de cerca el modelo de formulario que usamos dentro de nuestro ejemplo allí.

118
00:09:31,740 --> 00:09:38,263
Con esta rápida comprensión de las formas reactivas, pasemos ahora al ejercicio

119
00:09:38,263 --> 00:09:43,880
donde doblaremos una forma reactiva dentro de nuestra aplicación angular y

120
00:09:43,880 --> 00:09:47,958
a lo largo del camino consolidaremos parte de la terminología y

121
00:09:47,958 --> 00:09:52,866
también algunas de las ideas que acabamos de explorar en esta lección.

122
00:09:52,866 --> 00:09:59,009
[MÚSICA]