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

2
00:00:04,979 --> 00:00:09,281
Háganos saber brevemente las formas de valor y el soporte de formularios en Angular.

3
00:00:09,281 --> 00:00:14,748
Ya hemos visto el uso de formularios en el curso de arranque anterior y

4
00:00:14,748 --> 00:00:20,139
hemos visto cómo bootstrap nos permite diseñar los formularios HDMI estándar.

5
00:00:20,139 --> 00:00:24,664
En esta lección, vamos a ver el soporte angular para formas,

6
00:00:24,664 --> 00:00:30,200
dos tipos diferentes de formas, formas controladas por plantillas y formas reactivas.

7
00:00:30,200 --> 00:00:32,450
Veremos la diferencia entre los dos, y

8
00:00:32,450 --> 00:00:35,670
donde cada uno de ellos es adecuado dentro de nuestra aplicación Angular.

9
00:00:35,670 --> 00:00:39,400
Veremos las ventajas y desventajas de cada enfoque

10
00:00:39,400 --> 00:00:43,490
con más detalle en esta lección y en la siguiente lección.

11
00:00:44,910 --> 00:00:50,880
Además, veremos la validación de formularios, cómo Angular apoya la validación de formularios,

12
00:00:50,880 --> 00:00:55,600
y cómo podemos llevar a cabo la validación de formularios para nuestro formulario impulsado por plantillas

13
00:00:55,600 --> 00:01:00,420
en la próxima conferencia, después del ejercicio.

14
00:01:02,400 --> 00:01:06,867
Ya nos hemos dado cuenta de que los formularios admiten una experiencia de entrada de datos cohesiva, efectiva y

15
00:01:06,867 --> 00:01:10,230
convincente para los usuarios.

16
00:01:10,230 --> 00:01:14,350
Usted ve formularios que se utilizan en todas partes en los sitios web.

17
00:01:14,350 --> 00:01:14,940
Por ejemplo,

18
00:01:14,940 --> 00:01:19,520
cuando necesite iniciar sesión en un sitio web debe escribir su ID de usuario y contraseña.

19
00:01:19,520 --> 00:01:22,210
O cuando necesite enviar información, por ejemplo.

20
00:01:22,210 --> 00:01:26,871
Si usted está reservando un boleto de película, o si está haciendo un pedido

21
00:01:26,871 --> 00:01:32,027
en una tienda de comestibles en línea, o muchos otros casos de uso, los formularios

22
00:01:32,027 --> 00:01:37,482
se utilizan ampliamente para proporcionar una forma completa para que los usuarios

23
00:01:37,482 --> 00:01:43,360
ingresen información en los sitios web o en la aplicación web.

24
00:01:43,360 --> 00:01:47,922
El marco Angular proporciona soporte integral para formularios

25
00:01:47,922 --> 00:01:51,670
, incluyendo formularios y validación de formularios.

26
00:01:51,670 --> 00:01:57,379
Aquí es donde aprovechamos el soporte Angular para el enlace de datos bidireccional

27
00:01:57,379 --> 00:02:03,690
y el seguimiento de los cambios que hacemos en los elementos del formulario, así como la validación de formularios.

28
00:02:03,690 --> 00:02:07,030
Por lo tanto, cuando introduce datos en un campo de entrada en su formulario,

29
00:02:07,030 --> 00:02:11,330
los datos se evalúan automáticamente con soporte angular para formularios.

30
00:02:11,330 --> 00:02:15,980
Vamos a ver algunos de estos con más detalle a medida que vamos a través de las lecciones.

31
00:02:15,980 --> 00:02:21,010
Permítanme recordarles rápidamente los propios formularios HTML.

32
00:02:21,010 --> 00:02:24,790
Ya sabe que los formularios son compatibles con el elemento de formulario

33
00:02:25,910 --> 00:02:28,200
en su página HTML.

34
00:02:28,200 --> 00:02:32,734
Junto con el elemento formulario, dentro de la etiqueta de formulario, también puede incluir cosas

35
00:02:32,734 --> 00:02:37,561
como <input>, <textarea>, <select>, y <button>s, y muchos más.

36
00:02:37,561 --> 00:02:42,585
Veremos cómo funciona el soporte Angular junto con los elementos de formulario HTML

37
00:02:42,585 --> 00:02:47,608
, nos permiten diseñar dos tipos diferentes de formas, formas de plantilla

38
00:02:47,608 --> 00:02:52,292
y también formas reactivas en Angular.

39
00:02:52,292 --> 00:02:58,585
En esta lección, nos concentraremos en el soporte angular para formas controladas por plantillas.

40
00:02:58,585 --> 00:03:03,125
En una forma basada en plantillas, usarán la plantilla Angular junto con

41
00:03:03,125 --> 00:03:07,250
los elementos de formulario que acabamos de ver para poder construir formularios y

42
00:03:07,250 --> 00:03:10,646
hacer uso del soporte Angular para formularios controlados por plantillas.

43
00:03:10,646 --> 00:03:15,432
Y seremos capaces de vincular las directivas específicas de formulario angular a los elementos de formulario

44
00:03:15,432 --> 00:03:20,450
dentro de nuestras plantillas, y luego aprovechar el enlace de datos bidireccional

45
00:03:20,450 --> 00:03:25,336
que también forman validación y soporte de errores que Angular proporciona para nosotros.

46
00:03:25,336 --> 00:03:28,128
En el ejercicio que sigue inmediatamente,

47
00:03:28,128 --> 00:03:32,512
esta conferencia analizará cómo podemos diseñar una forma basada en plantillas.

48
00:03:32,512 --> 00:03:37,164
En particular, también veremos cómo el enlace de datos bidireccional con

49
00:03:37,164 --> 00:03:41,986
Angular soporta, usando la directiva ngModel se puede aprovechar para

50
00:03:41,986 --> 00:03:44,894
vincular la información de su formulario a

51
00:03:44,894 --> 00:03:50,430
algunas variables JavaScript que declaró dentro de sus clases.

52
00:03:50,430 --> 00:03:53,610
En el ejercicio que inmediatamente sigue a esta conferencia,

53
00:03:53,610 --> 00:03:56,960
analizamos cómo podemos diseñar una forma basada en plantillas.

54
00:03:56,960 --> 00:04:01,350
En particular, veremos cómo el enlace de datos bidireccional que Angular admite usando

55
00:04:01,350 --> 00:04:06,280
la directiva ngModel se puede aprovechar para vincular la información de

56
00:04:06,280 --> 00:04:10,870
su formulario a algunas variables JavaScript que declare dentro de sus clases.

57
00:04:10,870 --> 00:04:14,860
Y aquí es donde el plátano en una caja a la que nos referimos

58
00:04:14,860 --> 00:04:19,140
antes con la directiva NGModel viene en nuestra ayuda.

59
00:04:19,140 --> 00:04:22,880
A medida que vayamos a través de los ejercicios, esto será aún más claro.

60
00:04:22,880 --> 00:04:27,139
Ahora vamos a aprender cómo aprovechar el soporte angular para formularios basados en plantillas

61
00:04:27,139 --> 00:04:32,585
con el fin de diseñar nuestros formularios en los ejercicios.

62
00:04:32,585 --> 00:04:36,014
[MÚSICA]