1
00:00:03,170 --> 00:00:05,820
Ora che abbiamo imparato a conoscere il

2
00:00:05,820 --> 00:00:11,165
supporto di convalida del modulo basato su modello in Angular nella lezione precedente,

3
00:00:11,165 --> 00:00:14,625
applichiamo ciò che abbiamo imparato

4
00:00:14,625 --> 00:00:18,330
al modulo di login che abbiamo progettato nell'esercizio precedente.

5
00:00:18,330 --> 00:00:21,395
Faremo una semplice convalida del modulo per il modulo di login.

6
00:00:21,395 --> 00:00:26,160
In particolare, verrà specificato il nome utente e la password come richiesto,

7
00:00:26,160 --> 00:00:32,430
quindi verrà verificato che l'utente digiti le informazioni in questi campi

8
00:00:32,430 --> 00:00:37,125
e sarà in grado di visualizzare i messaggi di errore quando i campi sono vuoti.

9
00:00:37,125 --> 00:00:46,180
Procediamo con questa modifica all'applicazione in questo esercizio.

10
00:00:46,180 --> 00:00:49,215
Per iniziare a questo esercizio,

11
00:00:49,215 --> 00:00:53,600
andiamo al modulo di accesso qui,

12
00:00:53,600 --> 00:00:57,090
che abbiamo nel modello di componenti di accesso qui.

13
00:00:57,090 --> 00:01:02,400
Abbiamo già aggiunto l'attributo novalidate al modulo di login.

14
00:01:02,400 --> 00:01:10,780
Quindi, aggiungiamo la variabile modello chiamata LogInform a questo modello,

15
00:01:10,780 --> 00:01:18,835
e quindi impostalo su ngForm come abbiamo capito dalla lezione precedente qui.

16
00:01:18,835 --> 00:01:20,170
Quindi, facendo questo,

17
00:01:20,170 --> 00:01:26,500
stiamo specificando che questa variabile modello ci permette di tenere traccia dello stato del modulo.

18
00:01:26,500 --> 00:01:31,330
Quindi, possiamo anche verificare lo stato valido o non valido per questo modulo.

19
00:01:31,330 --> 00:01:34,485
Ora, inoltre, per ciascuno di questi input,

20
00:01:34,485 --> 00:01:43,620
aggiungeremo allo stesso modo le variabili del modello corrispondenti qui.

21
00:01:43,620 --> 00:01:45,220
Quindi, lasciami andare alla riga successiva qui,

22
00:01:45,220 --> 00:01:52,670
e lì dirò username è ngModel.

23
00:01:52,670 --> 00:01:58,360
Quindi, specificheremo anche questo come richiesto qui.

24
00:01:58,360 --> 00:02:00,660
Allo stesso modo, per la password,

25
00:02:00,660 --> 00:02:09,545
aggiungeremo nella variabile modello corrispondente qui come password è in ngModel,

26
00:02:09,545 --> 00:02:15,700
e quindi specificare questo come richiesto qui.

27
00:02:15,700 --> 00:02:19,700
Quindi, ora che abbiamo specificato le variabili del modello,

28
00:02:19,700 --> 00:02:23,870
possiamo quindi effettuare alcuni dei controlli di convalida del modulo qui.

29
00:02:23,870 --> 00:02:26,490
Ora, poiché stiamo specificando questo come richiesto,

30
00:02:26,490 --> 00:02:28,280
ciò significa che se questi campi,

31
00:02:28,280 --> 00:02:30,455
i campi di input sono vuoti,

32
00:02:30,455 --> 00:02:34,525
allora l'errore richiesto sarà contrassegnato per questo.

33
00:02:34,525 --> 00:02:40,105
Allo stesso modo, ora che abbiamo la variabile modello per il modulo,

34
00:02:40,105 --> 00:02:47,380
possiamo facilmente usarlo per controllare e disabilitare il pulsante Invia qui sotto.

35
00:02:47,380 --> 00:02:49,255
Quindi, per il pulsante Invia,

36
00:02:49,255 --> 00:02:53,270
quello che facciamo qui è quello di utilizzare

37
00:02:53,270 --> 00:03:01,080
il campo disabilitato qui,

38
00:03:01,080 --> 00:03:03,500
e quindi imposteremo il campo disabilitato su

39
00:03:03,500 --> 00:03:12,270
LogInfor.Form.Invalid.

40
00:03:12,270 --> 00:03:14,030
Quindi, facendo questo,

41
00:03:14,030 --> 00:03:18,030
disabiliteremo questo pulsante quando il modulo non è valido.

42
00:03:18,030 --> 00:03:23,925
Quindi, in tal modo, l'utente non può nemmeno inviare il modulo quando il modulo contiene voce non valida.

43
00:03:23,925 --> 00:03:27,355
Quindi, ad esempio, se il nome utente è vuoto o la password è vuota,

44
00:03:27,355 --> 00:03:29,520
il modulo di accesso non sarà valido

45
00:03:29,520 --> 00:03:32,290
e quindi l'utente non può inviare questo modulo.

46
00:03:32,290 --> 00:03:36,950
Ora, questa è una parte della convalida del modulo che possiamo fare,

47
00:03:36,950 --> 00:03:40,385
per cui possiamo impedire che il modulo venga inviato.

48
00:03:40,385 --> 00:03:43,285
Inoltre, per ciascuno di questi campi,

49
00:03:43,285 --> 00:03:47,945
possiamo anche visualizzare un messaggio di errore per

50
00:03:47,945 --> 00:03:53,875
indicare il tipo di errore che si verifica in questo particolare campo.

51
00:03:53,875 --> 00:03:55,309
Quindi, per fare questo,

52
00:03:55,309 --> 00:03:58,230
a ciascuno di questi elementi del campo modulo,

53
00:03:58,230 --> 00:04:07,650
aggiungeremo il tag mat-error lì,

54
00:04:07,650 --> 00:04:12,270
e poi diremo stop NGif,

55
00:04:12,270 --> 00:04:18,345
e diremo username.errors.

56
00:04:18,345 --> 00:04:23,920
Quindi, si noti che abbiamo già dato questo modello una variabile chiamata username, in

57
00:04:23,920 --> 00:04:28,665
modo che possiamo usare in username.errors se ci sono errori e

58
00:04:28,665 --> 00:04:34,930
se questo tipo di errore è richiesto.

59
00:04:34,930 --> 00:04:41,810
Quindi, se l'errore è un tipo richiesto di errore che è causa lì,

60
00:04:41,810 --> 00:04:44,060
allora a quel punto,

61
00:04:44,060 --> 00:04:54,140
possiamo specificare che l'errore corrispondente da visualizzare è il nome utente è richiesto.

62
00:04:54,140 --> 00:04:59,305
Quindi, questo è l'errore che verrà visualizzato per questo campo qui.

63
00:04:59,305 --> 00:05:03,810
Allo stesso modo, lasciami aggiungere lo stesso tipo di cosa per il campo della password qui.

64
00:05:03,810 --> 00:05:06,610
Quindi, lasciami copiare e incollarlo qui,

65
00:05:06,610 --> 00:05:09,110
e poi diremo password.errors.

66
00:05:09,110 --> 00:05:17,395
Quindi, il messaggio sarà password è richiesto.

67
00:05:17,395 --> 00:05:19,070
Quindi, aggiungendo questo,

68
00:05:19,070 --> 00:05:22,535
mostreremo messaggi di errore sotto

69
00:05:22,535 --> 00:05:27,665
questi campi quando il campo non contiene alcuna informazione.

70
00:05:27,665 --> 00:05:29,950
Piccola correzione qui.

71
00:05:29,950 --> 00:05:34,820
Dovrebbe essere il nome utente? errors.required qui,

72
00:05:34,820 --> 00:05:38,470
e allo stesso modo, anche questo dovrebbe essere.required qui.

73
00:05:38,470 --> 00:05:40,375
Quindi, con queste modifiche,

74
00:05:40,375 --> 00:05:43,280
il mio componente di login è ora pronto

75
00:05:43,280 --> 00:05:47,275
per eseguire la convalida del modulo e quindi visualizzare messaggi di errore.

76
00:05:47,275 --> 00:05:52,505
Quindi, salviamo le modifiche e poi andiamo a dare un'occhiata all'applicazione aggiornata.

77
00:05:52,505 --> 00:05:55,705
Andando alla nostra applicazione nel browser,

78
00:05:55,705 --> 00:05:58,475
apriamo il modulo di accesso qui.

79
00:05:58,475 --> 00:06:01,720
Quindi, puoi vedere che ora sia il nome utente che la password portano

80
00:06:01,720 --> 00:06:05,355
una stella lì per indicare che sono entrambi richiesti.

81
00:06:05,355 --> 00:06:07,550
Quindi, fammi digitare.

82
00:06:09,870 --> 00:06:16,130
Quindi, qui, si vede che il modulo è valido perché contiene informazioni,

83
00:06:16,130 --> 00:06:20,375
e quindi il pulsante Login sarà abilitato.

84
00:06:20,375 --> 00:06:24,840
Permettetemi di rimuovere le informazioni dal campo della password,

85
00:06:24,840 --> 00:06:27,950
e quindi si nota immediatamente che

86
00:06:27,950 --> 00:06:32,405
l'errore è indicato qui dicendo che la password è richiesta.

87
00:06:32,405 --> 00:06:37,040
Si noti inoltre che il pulsante Login non sarà più abilitato.

88
00:06:37,040 --> 00:06:40,760
Sara' disabilitato. Quindi, non sarai in grado di inviare il modulo qui.

89
00:06:40,760 --> 00:06:43,960
Ma nel momento in cui inserisco qualcosa nella password,

90
00:06:43,960 --> 00:06:47,060
allora il pulsante Login sarà abilitato

91
00:06:47,060 --> 00:06:49,670
e saremo in grado di inviare il modulo qui.

92
00:06:49,670 --> 00:06:51,390
Analogamente per il nome utente.

93
00:06:51,390 --> 00:06:55,045
Se rimuovo le informazioni sul nome utente

94
00:06:55,045 --> 00:06:58,115
lì, vedrai l'errore visualizzato qui,

95
00:06:58,115 --> 00:07:04,670
e inoltre vedrai che il pulsante Login non è abilitato a questo punto.

96
00:07:04,670 --> 00:07:10,270
Quindi, è così che la convalida del modulo può essere eseguita in questo caso.

97
00:07:10,270 --> 00:07:12,170
Quindi, come hai visto,

98
00:07:12,170 --> 00:07:15,960
aggiungendo in forma semplice convalida alla nostra applicazione,

99
00:07:15,960 --> 00:07:18,515
possiamo verificare che

100
00:07:18,515 --> 00:07:22,925
i campi contengano le informazioni che si suppone di contenere,

101
00:07:22,925 --> 00:07:24,725
e nel formato giusto.

102
00:07:24,725 --> 00:07:30,290
Esamineremo un po 'di più di quale forma convalida in uno degli esercizi successivi,

103
00:07:30,290 --> 00:07:33,020
specialmente per le forme reattive.

104
00:07:33,020 --> 00:07:35,945
Con questo, completiamo questo esercizio.

105
00:07:35,945 --> 00:07:38,840
Questo è un buon momento per fare un commit git

106
00:07:38,840 --> 00:07:43,080
con i moduli basati sul modello di messaggio, parte due.