1
00:00:04,070 --> 00:00:10,290
Abbiamo appena completato l'apprendimento delle forme guidate da modelli angolari e anche,

2
00:00:10,290 --> 00:00:14,300
nell'esercizio, costruito la nostra prima forma guidata da modelli.

3
00:00:14,300 --> 00:00:18,210
Ora, quando l'utente digita le informazioni nei campi modulo,

4
00:00:18,210 --> 00:00:23,655
potremmo desiderare di convalidare i dati che l'utente digita in tali campi dati.

5
00:00:23,655 --> 00:00:25,630
Nei primi giorni del web,

6
00:00:25,630 --> 00:00:28,950
l'unico modo per controllare i dati era di spedire i dati

7
00:00:28,950 --> 00:00:32,580
al server e quindi eseguire i controlli sul lato server,

8
00:00:32,580 --> 00:00:37,155
quindi ottenere il risultato dal lato server.

9
00:00:37,155 --> 00:00:41,935
Ma in questi giorni, con potenti framework lato client come Angular,

10
00:00:41,935 --> 00:00:46,580
molta della convalida dei dati può essere facilmente eseguita sul lato client

11
00:00:46,580 --> 00:00:52,070
stesso e possiamo facilmente rilevare molti degli errori sul lato client,

12
00:00:52,070 --> 00:00:56,885
e quindi anche fornire indicazioni all'utente sugli errori.

13
00:00:56,885 --> 00:01:00,170
Ora, questo è dove vedremo il supporto angolare per la

14
00:01:00,170 --> 00:01:03,725
convalida del modulo e quindi come possiamo eseguire la convalida del modulo,

15
00:01:03,725 --> 00:01:11,170
e quindi mostrare i messaggi di errore per l'utente nelle viste.

16
00:01:11,260 --> 00:01:17,455
HTML5 viene già fornito con un supporto integrato per la convalida dei moduli.

17
00:01:17,455 --> 00:01:20,750
Ma quando stiamo usando Angular per la nostra applicazione,

18
00:01:20,750 --> 00:01:23,840
dobbiamo prima disattivare la convalida del modulo HTML5, in

19
00:01:23,840 --> 00:01:25,640
modo che la responsabilità di fare la

20
00:01:25,640 --> 00:01:29,750
convalida del modulo viene trasferita all'applicazione Angular.

21
00:01:29,750 --> 00:01:32,240
Quindi, per farlo per il modulo,

22
00:01:32,240 --> 00:01:34,525
come abbiamo visto nell'esercizio precedente,

23
00:01:34,525 --> 00:01:40,760
includiamo l'attributo novalidate al tag form lì, in

24
00:01:40,760 --> 00:01:43,910
modo che ciò assicuri che l'angolare

25
00:01:43,910 --> 00:01:47,585
assume la responsabilità di eseguire la convalida del modulo.

26
00:01:47,585 --> 00:01:50,645
In che modo Angular ci aiuta a fare la convalida del modulo?

27
00:01:50,645 --> 00:01:55,324
Questo è ciò che esamineremo più dettagliatamente dopo.

28
00:01:55,324 --> 00:01:59,600
Ogni volta che è necessario eseguire la convalida del modulo in Angular,

29
00:01:59,600 --> 00:02:05,570
specialmente quando è necessario fare riferimento ai campi del modulo all'interno del modello,

30
00:02:05,570 --> 00:02:09,960
è necessario l'aiuto delle variabili di riferimento del modello angolare.

31
00:02:09,960 --> 00:02:12,725
Come specifichiamo una variabile di riferimento del modello?

32
00:02:12,725 --> 00:02:15,485
La variabile di riferimento modello può essere specificata per

33
00:02:15,485 --> 00:02:19,235
qualsiasi elemento associando una variabile template come questa.

34
00:02:19,235 --> 00:02:22,880
Ad esempio, in questo caso per il modulo,

35
00:02:22,880 --> 00:02:29,760
stiamo specificando il modulo di login uguale a ngForm.

36
00:02:29,760 --> 00:02:33,160
Allo stesso modo, per un campo di input, ad esempio,

37
00:02:33,160 --> 00:02:35,050
si direbbe barra,

38
00:02:35,050 --> 00:02:39,725
o meglio #username è uguale a ngModel.

39
00:02:39,725 --> 00:02:46,130
In questo caso, il modulo di accesso e il nome utente sono tutte variabili di riferimento del modello.

40
00:02:46,130 --> 00:02:49,370
Queste variabili di riferimento modello possono quindi essere utilizzate all'interno del

41
00:02:49,370 --> 00:02:53,800
nostro modello angolare per fare riferimento a questi campi.

42
00:02:53,800 --> 00:02:56,245
Quindi, nel modello stesso,

43
00:02:56,245 --> 00:02:59,060
puoi controllare gli stati di controllo per

44
00:02:59,060 --> 00:03:03,289
quei campi, incluse cose come se il campo è valido,

45
00:03:03,289 --> 00:03:04,760
se è sporco

46
00:03:04,760 --> 00:03:06,430
o ha alcuni errori.

47
00:03:06,430 --> 00:03:12,865
Sfrutteremo questo supporto che Angular fornisce al fine di fare la convalida del modulo.

48
00:03:12,865 --> 00:03:15,964
Come ho detto, useremo

49
00:03:15,964 --> 00:03:21,870
le variabili di riferimento del modello per raccogliere lo stato di controllo per verificare le informazioni.

50
00:03:21,870 --> 00:03:27,370
Quindi, ad esempio, puoi dire username.pristine all'interno del tuo modello.

51
00:03:27,370 --> 00:03:30,440
Quindi, questo si riferisce al controllo dello stato,

52
00:03:30,440 --> 00:03:33,960
se il particolare controllo è nello stato incontaminato, il

53
00:03:33,960 --> 00:03:39,080
che significa che non è stato toccato e modificato dall'utente finora.

54
00:03:39,080 --> 00:03:41,840
Lo sporco è opposto a incontaminato, il

55
00:03:41,840 --> 00:03:45,050
che significa che quando un campo è sporco,

56
00:03:45,050 --> 00:03:49,105
significa che il campo è stato modificato dall'utente in passato.

57
00:03:49,105 --> 00:03:53,090
Allo stesso modo, lo stato di controllo valido e non valido

58
00:03:53,090 --> 00:03:58,295
ci consente di verificare se le informazioni contenute in quel campo sono valide o meno,

59
00:03:58,295 --> 00:04:02,360
a seconda delle specifiche del controllo

60
00:04:02,360 --> 00:04:06,530
per la validità o lo stato non valido di quel particolare campo.

61
00:04:06,530 --> 00:04:11,990
Quindi, ad esempio, è possibile verificare se è stato dichiarato un campo come richiesto, il

62
00:04:11,990 --> 00:04:14,930
che significa che ci si aspetta che l'utente

63
00:04:14,930 --> 00:04:18,790
digiti almeno alcune informazioni nel campo.

64
00:04:18,790 --> 00:04:24,280
L' assenza di informazioni all'interno del campo nel modulo indica che il campo non è valido.

65
00:04:24,280 --> 00:04:28,670
Allo stesso modo, è possibile specificare la terraferma o la lunghezza massima di un valore di campo, in

66
00:04:28,670 --> 00:04:31,970
modo da poter facilmente verificare se il numero di caratteri

67
00:04:31,970 --> 00:04:35,500
all'interno di un campo è circa la lunghezza principale,

68
00:04:35,500 --> 00:04:37,660
o inferiore alla lunghezza massima e così via.

69
00:04:37,660 --> 00:04:39,380
Nell' esercizio che segue,

70
00:04:39,380 --> 00:04:42,740
applicheremo questi vari approcci di convalida dei moduli per

71
00:04:42,740 --> 00:04:47,080
il nostro modulo basato su modelli che abbiamo progettato nell'esercizio precedente.

72
00:04:47,080 --> 00:04:51,564
Ad esempio, nel modulo

73
00:04:51,564 --> 00:04:54,170
puoi disabilitare il pulsante di invio controllando

74
00:04:54,170 --> 00:04:56,770
se tale modulo è valido o meno.

75
00:04:56,770 --> 00:05:00,650
Quindi, in questo caso, associerai il disabilitato

76
00:05:00,650 --> 00:05:05,875
e lo imposterai uguale al modulo di accesso.form.invalid,

77
00:05:05,875 --> 00:05:07,970
significa che quando il modulo non è valido,

78
00:05:07,970 --> 00:05:10,480
questo pulsante sarà disabilitato in questo caso.

79
00:05:10,480 --> 00:05:15,910
Quindi, l'utente non sarà autorizzato a inviare le informazioni attraverso questo particolare modulo.

80
00:05:15,910 --> 00:05:18,995
Quindi, questo è un modo per garantire che le

81
00:05:18,995 --> 00:05:22,700
voci errate non vengano inviate dall'utente attraverso il modulo.

82
00:05:22,700 --> 00:05:25,100
Analogamente, per campi specifici,

83
00:05:25,100 --> 00:05:30,080
è possibile verificare se il campo è stato compilato o meno.

84
00:05:30,080 --> 00:05:33,125
Quindi, se si specifica che un particolare campo è richiesto

85
00:05:33,125 --> 00:05:36,620
specificando l'attributo richiesto per il campo di input, è

86
00:05:36,620 --> 00:05:39,320
possibile verificare se c'è un errore

87
00:05:39,320 --> 00:05:43,250
del tipo richiesto generato per il particolare elemento campo lì.

88
00:05:43,250 --> 00:05:45,020
Quindi, nel tuo codice, ad esempio,

89
00:05:45,020 --> 00:05:47,390
puoi persino specificare di informare l'utente sul

90
00:05:47,390 --> 00:05:51,035
fatto che un particolare campo non è corretto.

91
00:05:51,035 --> 00:05:56,885
Si utilizza l'errore di tappetino per indicare che.

92
00:05:56,885 --> 00:06:01,230
Quindi, il tag di errore mat-, che proviene, di

93
00:06:01,230 --> 00:06:06,555
nuovo, dal supporto del modulo materiale angolare come vedi qui,

94
00:06:06,555 --> 00:06:09,195
se il NGIF risulta essere vero,

95
00:06:09,195 --> 00:06:15,560
allora quel messaggio verrà visualizzato sotto nel campo di input lì,

96
00:06:15,560 --> 00:06:17,100
e simile al campo di input,

97
00:06:17,100 --> 00:06:20,405
sarà contrassegnato come rosso sullo schermo.

98
00:06:20,405 --> 00:06:25,085
Quindi, questo è qualcosa che stai per controllare e

99
00:06:25,085 --> 00:06:30,000
garantire e anche consegnare messaggi di errore all'utente.

100
00:06:30,000 --> 00:06:31,740
Nell' esercizio che segue,

101
00:06:31,740 --> 00:06:35,980
applicheremo questo approccio per controllare il nome utente e la password.

102
00:06:35,980 --> 00:06:40,700
Specificheremo che questi campi sono obbligatori e se l'utente

103
00:06:40,700 --> 00:06:45,565
non digita alcuna informazione in questi campi dopo che il campo è stato toccato,

104
00:06:45,565 --> 00:06:51,210
allora ci assicureremo che venga visualizzato il messaggio di errore appropriato per l'utente.

105
00:06:51,210 --> 00:06:57,469
Quindi, con questa rapida comprensione della convalida del modulo in Angular,

106
00:06:57,469 --> 00:06:58,970
passiamo all'esercizio,

107
00:06:58,970 --> 00:07:03,410
dove controlleremo come possiamo fare una semplice convalida del modulo per

108
00:07:03,410 --> 00:07:08,160
il nostro modulo di login e quindi essere in grado di visualizzare messaggi di errore.

109
00:07:08,160 --> 00:07:12,470
Torneremo di nuovo per formare la convalida in uno degli esercizi successivi,

110
00:07:12,470 --> 00:07:19,660
dopo aver appreso di più sul supporto reattivo in Angular.