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

2
00:00:04,735 --> 00:00:09,734
Ahora que hemos tenido una rápida introducción a la validación de formas reactivas en

3
00:00:09,734 --> 00:00:14,901
la conferencia anterior, procedamos al siguiente ejercicio donde podríamos

4
00:00:14,901 --> 00:00:20,926
aplicar la validación de formularios a la forma reactiva que creamos en el ejercicio anterior.

5
00:00:20,926 --> 00:00:26,101
Así que yendo a nuestro archivo mecanografiado de componentes de contacto,

6
00:00:26,101 --> 00:00:34,463
vamos a agregar los validadores de formularios a cada una de estas propiedades dentro de nuestro modelo de formulario.

7
00:00:34,463 --> 00:00:42,264
Entonces, para el primer nombre, diría dentro de la matriz, Validators.

8
00:00:45,794 --> 00:00:50,830
Requerido, Del mismo modo voy a

9
00:00:50,830 --> 00:00:55,977
aplicar lo mismo a la, apellido.

10
00:00:58,032 --> 00:01:02,361
Entonces email, y también para el telnum, así que para

11
00:01:02,361 --> 00:01:09,030
el telnum yo diría que para los tres restantes puedo dejarlos abiertos,

12
00:01:09,030 --> 00:01:16,066
porque estoy de acuerdo con ser falso o verdadero y darles otros valores.

13
00:01:16,066 --> 00:01:21,117
Debido a que es un ligero cambio y contacttype puede tomar solo un

14
00:01:21,117 --> 00:01:26,166
de los tres valores y el valor predeterminado ya se da allí,

15
00:01:26,166 --> 00:01:30,470
y para el mensaje, podemos hacer que no sea un valor requerido.

16
00:01:30,470 --> 00:01:32,595
Si el usuario no quiere escribir comentarios,

17
00:01:32,595 --> 00:01:36,030
puede permitir que no escriba comentarios, pero si lo desea,

18
00:01:36,030 --> 00:01:39,619
puede agregar los validators.Required incluso para el mensaje.

19
00:01:39,619 --> 00:01:46,890
Además, cuando restablece el formulario en el método OnSubmit aquí

20
00:01:46,890 --> 00:01:52,910
también puede restablecer el formulario a su valor inicial como especificamos

21
00:01:52,910 --> 00:01:57,630
en el método donde creamos el formulario.

22
00:01:57,630 --> 00:02:05,100
Entonces, dentro del valor de restablecimiento, toma un objeto como parámetro aquí.

23
00:02:05,100 --> 00:02:10,479
Este objeto será utilizado por el método reset haciendo

24
00:02:10,479 --> 00:02:17,447
uso del método set value que vimos en la conferencia anterior para restablecer

25
00:02:17,447 --> 00:02:24,192
el formulario a la condición tal como era cuando se creó originalmente.

26
00:02:24,192 --> 00:02:28,467
Así, aquí podemos suministrar parámetros

27
00:02:28,467 --> 00:02:35,442
como firstname: '',

28
00:02:35,442 --> 00:02:41,745
lastname: '', telnum: 0,

29
00:02:43,660 --> 00:02:47,219
Entonces email: '',

30
00:02:49,160 --> 00:02:53,690
de acuerdo: false,

31
00:02:53,690 --> 00:03:01,132
contacttype: 'Ninguno',

32
00:03:01,132 --> 00:03:07,940
message: ''});.

33
00:03:07,940 --> 00:03:11,206
Así que estos valores que suministramos en este objeto JavaScript

34
00:03:14,042 --> 00:03:19,081
que nos damos el parámetro para el método reset

35
00:03:19,081 --> 00:03:23,514
tendrán exactamente los mismos valores que vimos para

36
00:03:23,514 --> 00:03:28,168
estas propiedades cuando creamos ese formulario de retroalimentación.

37
00:03:28,168 --> 00:03:32,325
También necesitamos restablecer el formulario completamente en la plantilla.

38
00:03:32,325 --> 00:03:36,532
Así que para hacer eso, para volver a la importación aquí, y

39
00:03:36,532 --> 00:03:43,130
luego también importaremos ViewChild} desde '@angular /core';.

40
00:03:43,130 --> 00:03:45,950
Esto nos permitirá obtener acceso a

41
00:03:45,950 --> 00:03:49,910
cualquiera de los elementos dom secundarios dentro de mi plantilla.

42
00:03:49,910 --> 00:03:54,054
Así que después de hacer esto, entrando en el código,

43
00:03:54,054 --> 00:03:59,321
aquí en el ContactComponent, puedo decir @ViewChild,

44
00:03:59,321 --> 00:04:04,250
y luego podré hacer referencia al FeedbackForm por

45
00:04:04,250 --> 00:04:09,088
dándole una variable de plantilla con el nombre fform.

46
00:04:09,088 --> 00:04:14,698
Vas a hacer eso en el siguiente paso, y luego para esto,

47
00:04:14,698 --> 00:04:19,770
me referiré a esto usando feedbackFormDirective.

48
00:04:21,890 --> 00:04:27,030
Así que esto nos permite obtener acceso al formulario de plantilla y luego restablecerlo completamente

49
00:04:27,030 --> 00:04:34,200
, de modo que el formulario mismo se restablezca de nuevo a su valor prístino.

50
00:04:34,200 --> 00:04:38,710
Así que este es otro paso adicional que tenemos que hacer para asegurarnos de que el formulario sea

51
00:04:38,710 --> 00:04:43,470
completamente restablecido a su valor inicial aquí.

52
00:04:43,470 --> 00:04:50,268
Ahora, habiendo hecho eso en el método onSubject, después de restablecer el objeto FeedbackForm

53
00:04:53,241 --> 00:04:58,669
aquí, también necesitamos agregar

54
00:04:58,669 --> 00:05:06,242
en this.feedbackFormDirective.resetForm ();

55
00:05:08,355 --> 00:05:10,060
Allí.

56
00:05:10,060 --> 00:05:15,045
Así que esto asegurará que mi FeedbackForm se restablezca completamente a su valor

57
00:05:15,045 --> 00:05:18,400
prístino en este punto.

58
00:05:18,400 --> 00:05:23,273
Así que después de estos cambios vamos ahora a nuestra plantilla

59
00:05:23,273 --> 00:05:29,050
archivo para mostrar cómo podemos reflejar estos errores

60
00:05:29,050 --> 00:05:33,630
en nuestra plantilla para nuestro formulario allí.

61
00:05:33,630 --> 00:05:35,730
Entonces, cambiando al archivo de plantilla.

62
00:05:35,730 --> 00:05:39,490
Así que primero, vamos a ir al botón aquí, y

63
00:05:39,490 --> 00:05:44,705
luego vamos a hacer que el botón Desactivado.

64
00:05:46,924 --> 00:05:56,470
Si el «FeedbackForm no es válido».

65
00:05:56,470 --> 00:06:01,280
Por lo tanto, el botón estará habilitado sólo cuando el FeedbackForm sea válido.

66
00:06:01,280 --> 00:06:06,403
Pasando a ese formulario permítanme agregar en

67
00:06:06,403 --> 00:06:15,674
el <mat-error *nGIF="feedbackForm.get» get

68
00:06:18,727 --> 00:06:28,727
('firstname') .hasError ('required')

69
00:06:30,484 --> 00:06:31,577
&&

70
00:06:31,577 --> 00:06:40,875
feedbackForm.get ('firstname')

71
00:06:47,340 --> 00:06:54,588
.touched», y el mensaje es Se requiere Nombre.

72
00:06:56,040 --> 00:07:01,070
Así que ese sería el mensaje que asignas usando una sola línea con lo oculto,

73
00:07:01,070 --> 00:07:02,370
con esta información allí.

74
00:07:04,710 --> 00:07:11,009
Permítanme aplicar lo mismo al apellido,

75
00:07:15,328 --> 00:07:20,007
Número de teléfono y el correo electrónico.

76
00:07:20,007 --> 00:07:25,736
Así que solo voy a copiar, pegar, y editarlos,

77
00:07:25,736 --> 00:07:32,226
para que pueda continuar con ellos, y ('apellidos').

78
00:07:36,243 --> 00:07:38,472
Apellido.

79
00:07:38,472 --> 00:07:39,714
Telnum.

80
00:07:39,714 --> 00:07:46,424
Así que aplico eso a ('telnum').

81
00:07:50,395 --> 00:07:53,948
Una vez más, la misma idea detrás de eso y luego también para correo electrónico.

82
00:08:01,227 --> 00:08:01,970
('correo electrónico').

83
00:08:05,976 --> 00:08:10,561
Vamos a añadir en la variable de plantilla llamada fform al formulario.

84
00:08:10,561 --> 00:08:16,460
Así que escribo #fform ="ngForm».

85
00:08:16,460 --> 00:08:22,187
Ir a nuestro formulario en el navegador, déjame escribir en el nombre,

86
00:08:22,187 --> 00:08:28,240
y ves que incluso si elimino el valor seguirá siendo verde,

87
00:08:28,240 --> 00:08:31,501
porque usamos el tocado allí.

88
00:08:31,501 --> 00:08:36,522
Pero en el momento en que me aleje de ella entonces

89
00:08:36,522 --> 00:08:42,586
podrá ver que eso se convierte en un color rojo.

90
00:08:42,586 --> 00:08:47,659
De manera similar para el Apellido verá que cuando

91
00:08:47,659 --> 00:08:54,020
elimine el valor Apellido, entonces eso se muestra allí de manera similar.

92
00:08:54,020 --> 00:08:57,710
Permítanme escribir el nombre y el apellido, y para el correo electrónico también.

93
00:08:59,736 --> 00:09:07,411
el, El mismo caso para el número de teléfono también.

94
00:09:07,411 --> 00:09:12,287
Así que así, puede hacer validación de formularios en nuestra aplicación.

95
00:09:12,287 --> 00:09:16,943
Con esto, completamos este ejercicio donde tenemos

96
00:09:16,943 --> 00:09:21,285
añadido en validación de formulario a nuestra forma reactiva.

97
00:09:21,285 --> 00:09:26,493
Este es un buen momento para que hagas un commit de git con el mensaje,

98
00:09:26,493 --> 00:09:28,750
reactivo forma la segunda parte.

99
00:09:28,750 --> 00:09:34,925
[MÚSICA]