1
00:00:00,120 --> 00:00:05,820
Bienvenidos en esta clase continuamos con crear el formulario en nuestra aplicación con Angular en el

2
00:00:05,820 --> 00:00:06,210
frontón.

3
00:00:06,300 --> 00:00:09,270
Entonces vamos a comenzar creando el componente.

4
00:00:09,510 --> 00:00:17,970
Nos vamos al terminal y con el comando en ti G de genes de C de componer, le vamos a indicar el lugar

5
00:00:18,060 --> 00:00:21,510
donde queremos crear el componente clientes Larch.

6
00:00:21,720 --> 00:00:28,770
Entonces la idea es que se crea dentro de clientes junto con el componente clientes y le vamos a llamar

7
00:00:28,830 --> 00:00:31,290
form de formulario o el nombre que quieran.

8
00:00:31,680 --> 00:00:35,550
Y además vamos a agregar la bandera menos menos flat.

9
00:00:35,880 --> 00:00:41,340
Esto indica que no tiene que crear la carpeta for dentro de clientes.

10
00:00:41,490 --> 00:00:47,910
Simplemente omite crear el directorio form y va a crear la componente directamente en clientes.

11
00:00:48,750 --> 00:00:58,410
Enter y observamos que dentro de clientes se crea el form componer CSS, el HTML, el spec y el componente

12
00:00:58,410 --> 00:00:58,920
de la clase.

13
00:00:59,160 --> 00:01:04,500
Vamos a eliminar el especto y la hoja de estilo, ya que no la vamos a utilizar.

14
00:01:06,070 --> 00:01:11,560
Bien, vamos a modificar el for component como eliminamos la hoja de estilo.

15
00:01:11,650 --> 00:01:13,720
Simplemente la tenemos que quitar de acá.

16
00:01:14,810 --> 00:01:17,300
Si no le quitamos, va a lanzar un error.

17
00:01:17,600 --> 00:01:21,230
Guardamos y vamos a abrir el app module.

18
00:01:22,190 --> 00:01:28,130
La configuración de nuestro módulo y vamos a agregar el módulo para formulario.

19
00:01:28,380 --> 00:01:29,720
Bueno, si se fijan acá.

20
00:01:30,700 --> 00:01:36,100
Registra el componente form y lo declara en integrar Echolls.

21
00:01:36,220 --> 00:01:40,290
Lo está registrando de forma automática a través del angulas y delay.

22
00:01:40,930 --> 00:01:46,390
Entonces vamos a importar forms module.

23
00:01:49,580 --> 00:02:01,700
From Varroa Angular Forns y vamos a tomar este Forns modulan y lo vamos a importar acá en import fon

24
00:02:01,790 --> 00:02:03,860
module y agregamos la coma.

25
00:02:04,030 --> 00:02:07,940
Bien, con eso ya registramos nuestro módulo para traja con formularios.

26
00:02:08,480 --> 00:02:09,290
Guardamos.

27
00:02:09,440 --> 00:02:14,930
Vamos a cerrar y el siguiente paso sería implementar nuestra vista formulario.

28
00:02:15,050 --> 00:02:17,240
Vamos a quitar el contenido.

29
00:02:17,900 --> 00:02:20,960
Vamos a agregar un div para el panel para el Carth

30
00:02:25,040 --> 00:02:33,230
y le damos un color de fondo dark y que el texto sea de color blanco width, text, width y cerramos

31
00:02:33,230 --> 00:02:33,650
las comillas.

32
00:02:33,710 --> 00:02:40,970
Bien, ahí tenemos nuestro div, nuestro panel y dentro vamos a agregar el car getter y el body.

33
00:02:51,950 --> 00:02:52,380
Y el body?

34
00:02:53,250 --> 00:03:02,220
Acá vamos a tener un título que vamos a declarar después en el componente y acá vamos a tener el formulario.

35
00:03:02,330 --> 00:03:04,010
El cuerpo del panel.

36
00:03:04,370 --> 00:03:06,260
Entonces lo primero es Fort.

37
00:03:06,530 --> 00:03:09,050
Acá tenemos la etiqueta form del formulario.

38
00:03:09,560 --> 00:03:11,300
El action lo vamos a quitar.

39
00:03:11,900 --> 00:03:18,800
Y por cada conjunto elemento vamos a tener un form grupo para agrupar la etiqueta el label con el campo.

40
00:03:18,920 --> 00:03:26,360
Necesitamos un div, un contenedor que va a agrupar todo el contenido, todas las fila de cada elemento.

41
00:03:30,290 --> 00:03:34,010
Entonces un form group row para que sea horizontal.

42
00:03:35,840 --> 00:03:40,550
Vamos a tener una etiqueta y vamos a tener un tipo en el div.

43
00:03:40,670 --> 00:03:46,280
Vamos a tener el campo, el impulso a la etiqueta.

44
00:03:46,370 --> 00:03:56,450
Le vamos a dar una clase también de vostra, un call form label y además le vamos a dar la medida de

45
00:03:56,450 --> 00:03:56,960
la columna.

46
00:03:57,110 --> 00:03:58,000
Entonces col.

47
00:03:58,130 --> 00:04:01,400
De columna que ocupe dos columnas.

48
00:04:01,490 --> 00:04:03,150
Recordemos que la columna empotra.

49
00:04:03,290 --> 00:04:04,160
Son de 12.

50
00:04:04,290 --> 00:04:11,870
Acá vamos a indicar que del total de 12 ocupe solamente 2 y acá en el TÍR también le vamos a indicar

51
00:04:11,930 --> 00:04:12,680
las columnas.

52
00:04:14,450 --> 00:04:17,380
Y acá que ocupe seis columnas de las doces.

53
00:04:17,630 --> 00:04:18,690
Es decir, la mitad.

54
00:04:18,800 --> 00:04:24,580
Luego damos un estilo en el campo, en el input form control.

55
00:04:26,930 --> 00:04:35,120
Bien, ahí tenemos el esqueleto para cada campo, para cada grupo de campo que contiene el label y el

56
00:04:35,120 --> 00:04:35,510
input.

57
00:04:36,320 --> 00:04:41,470
Entonces vamos a copiar y pegar nombre, apellido y el email.

58
00:04:42,720 --> 00:04:48,030
Entonces acá vamos a completar el label for nombre acá.

59
00:04:48,150 --> 00:04:48,720
Nombre.

60
00:04:49,920 --> 00:04:57,430
Acá vamos a colocar la directiva en Yí Model sería con los corchetes y con paréntesis en mi modelo.

61
00:04:58,890 --> 00:05:04,440
Igual a un valor acá sería el nombre del atributo que va a estar en la clase component.

62
00:05:04,650 --> 00:05:06,300
Eso después lo vamos a configurar.

63
00:05:06,390 --> 00:05:17,010
Por ahora le vamos a colocar cliente, punto, nombre y también el nombre del campo con el name nombre.

64
00:05:17,370 --> 00:05:21,300
Vamos a tener exactamente lo mismo para el apellido en el label for.

65
00:05:22,410 --> 00:05:28,130
Apellido apellido en Model.

66
00:05:28,440 --> 00:05:31,370
Acá podemos autocompletar con el Model.

67
00:05:32,190 --> 00:05:45,060
Acá le damos al cliente punto apellido el name apellido que sería el nombre del campo y para email igual.

68
00:05:50,220 --> 00:05:56,480
Bendi Model Cliente con tu email y email.

69
00:05:57,000 --> 00:06:02,030
Bien, ahí tenemos el siguiente paso es explicar en qué consiste el modelo.

70
00:06:02,100 --> 00:06:07,530
Pero antes vamos a crear el atributo cliente en el for component.

71
00:06:07,710 --> 00:06:08,700
En la clase componente.

72
00:06:09,000 --> 00:06:20,100
Entonces acá sobre el constructor, vamos a tener un atributo private cliente del tipo cliente del tipo

73
00:06:20,190 --> 00:06:21,480
de la clase igual.

74
00:06:22,270 --> 00:06:24,420
New cliente.

75
00:06:25,440 --> 00:06:26,730
Vamos a importar cliente.

76
00:06:31,090 --> 00:06:35,500
Recordemos que el cliente lo tenemos acá en la clase de modelo.

77
00:06:36,490 --> 00:06:40,380
Entonces sería punto es Larch cliente.

78
00:06:43,670 --> 00:06:50,060
Entonces, lo que hace el hinché Modell es una directiva que va a volar con los datos del formulario

79
00:06:50,180 --> 00:06:57,680
al objeto, al atributo, al objeto cliente y a sus atributos.

80
00:06:57,800 --> 00:07:03,890
Por ejemplo, el cliente punto nombre va a guardar el valor que escribamos en el campo nombre del formulario

81
00:07:04,070 --> 00:07:06,500
lo va a poblar en este atributo.

82
00:07:06,800 --> 00:07:09,560
Lo mismo con el apellido y lo mismo con el email.

83
00:07:09,830 --> 00:07:13,310
En otras palabras, lo que hace es un Pindy que hace un binding.

84
00:07:13,460 --> 00:07:19,820
Por lo tanto, va a poblar los datos del formulario al objeto cliente y sus atributos y es en ambas

85
00:07:19,820 --> 00:07:20,360
direcciones.

86
00:07:20,450 --> 00:07:26,330
Por ejemplo, si vamos a buscar un cliente a través del servicio y nos conectamos a un Wacken, a una

87
00:07:26,330 --> 00:07:32,450
API Rest y obtenemos un cliente por SAIDI, acá va a mostrar los valores del objeto cliente en el formulario.

88
00:07:32,540 --> 00:07:35,480
El nombre le pidió email muy parecido como traja Spring.

89
00:07:35,570 --> 00:07:40,610
Por lo tanto, el formulario está mapeado, está asignado a un objeto.

90
00:07:40,700 --> 00:07:46,340
Este objeto es un atributo en la clase componente y pasamos los datos.

91
00:07:46,910 --> 00:07:53,450
Entonces, básicamente el model es para mapear el formulario a un objeto del modelo.

92
00:07:53,600 --> 00:07:56,390
El siguiente paso sería crear el botón.

93
00:07:57,350 --> 00:08:04,910
Acá tenemos un div también con la clase de Vostra Font Group y Row.

94
00:08:06,700 --> 00:08:08,710
Otro día que iba a contener el botón,

95
00:08:11,800 --> 00:08:13,690
iba a ocupar también 6 espacio.

96
00:08:15,250 --> 00:08:17,680
Entonces un bottom que le vamos a llamar crear,

97
00:08:20,620 --> 00:08:27,100
iba a tener la clase botón de vostra btn primary.

98
00:08:30,160 --> 00:08:31,180
Y el rol Button?

99
00:08:31,300 --> 00:08:31,630
Bien.

100
00:08:31,750 --> 00:08:32,740
Ahí tenemos nuestra lista.

101
00:08:32,830 --> 00:08:43,090
Solamente faltaría en el form la directiva en Již Summit sería con los paréntesis Genki igual y acá

102
00:08:43,090 --> 00:08:49,240
agregamos el nombre del método del componente que se va a invocar cuando se envíe el formulario, cuando

103
00:08:49,240 --> 00:08:52,200
se realice el submit create.

104
00:08:52,570 --> 00:08:54,880
Entonces vamos a invocar al método Create.

105
00:08:55,150 --> 00:08:57,160
Vamos a guardar y en la clase component.

106
00:08:58,200 --> 00:09:08,820
Vamos a crear el método Crédit, no se Public Crédit va a retornar un void y ahí tenemos el método.

107
00:09:08,850 --> 00:09:09,810
Entonces, por ahora

108
00:09:12,480 --> 00:09:15,240
vamos a imprimir Flicker.

109
00:09:19,400 --> 00:09:24,330
Y también el objeto cliente, el objeto cliente con todos sus datos.

110
00:09:24,530 --> 00:09:28,070
Pero como es atributo sería un tiz punto cliente.

111
00:09:28,430 --> 00:09:34,880
Bueno, después obviamente el método Crédit se va a conectar al API Rest y va a persistir el objeto

112
00:09:34,880 --> 00:09:38,330
cliente que enviemos a través del formulario al API Rest.

113
00:09:38,470 --> 00:09:45,030
Y solamente faltaría el título private del tipo String.

114
00:09:46,430 --> 00:09:49,510
Crear cliente y guardamos.

115
00:09:49,580 --> 00:09:51,230
Bien, estamos listo.

116
00:09:51,350 --> 00:09:57,440
Ya tenemos implementado nuestro componente formulario con lo básico con todo su campo.

117
00:09:57,500 --> 00:10:04,280
También tenemos mapeado cada campo del formulario con un atributo del objeto cliente que a su vez el

118
00:10:04,280 --> 00:10:08,510
objeto cliente es un atributo del componente form.

119
00:10:09,170 --> 00:10:13,820
Por lo tanto, de forma automática, cuando se envíe el formulario, va a invocar el Crédit.

120
00:10:14,120 --> 00:10:20,810
El método CRÉE a través del aditiva submit va a ser un pint de los valores de los campos.

121
00:10:20,870 --> 00:10:26,570
Iba a guardar esos valores en los atributos y cuando se invoque el método Grey, vamos a obtener el

122
00:10:26,570 --> 00:10:30,260
cliente listo para que después se pueda guardar con todos sus datos.

123
00:10:30,410 --> 00:10:32,000
Bien, entonces la siguiente clase.

124
00:10:32,090 --> 00:10:33,830
Vamos a probar este ejemplo.

125
00:10:33,950 --> 00:10:41,660
Vamos a crear la ruta del componente Form en module y también vamos a crear los links quedabamos hasta

126
00:10:41,660 --> 00:10:41,990
acá.

127
00:10:42,080 --> 00:10:45,020
Y cualquier duda que tengan los revisamos en los foros.

128
00:10:45,170 --> 00:10:46,040
Hasta la próxima.