1 00:00:00,000 --> 00:00:04,735 [MUSIC] 2 00:00:04,735 --> 00:00:09,734 Ora che abbiamo avuto una rapida introduzione alla convalida dei moduli reattivi 3 00:00:09,734 --> 00:00:14,901 nella lezione precedente, passiamo all'esercizio successivo in cui potremmo 4 00:00:14,901 --> 00:00:20,926 applicare la convalida del modulo al modulo reattivo creato nell'esercizio precedente. 5 00:00:20,926 --> 00:00:26,101 Quindi, andando al nostro file dattiloscritto componente di contatto, 6 00:00:26,101 --> 00:00:34,463 aggiungiamo i validatori del modulo a ciascuna di queste proprietà all'interno del nostro modello di modulo. 7 00:00:34,463 --> 00:00:42,264 Quindi per il primo nome direi all'interno dell'array, Validatori. 8 00:00:45,794 --> 00:00:50,830 Obbligatorio, Allo 9 00:00:50,830 --> 00:00:55,977 stesso modo applicherò lo stesso al, cognome. 10 00:00:58,032 --> 00:01:02,361 Poi e-mail, e anche per il telnum, quindi per 11 00:01:02,361 --> 00:01:09,030 il telnum direi per i restanti tre posso lasciarli aperti, 12 00:01:09,030 --> 00:01:16,066 perché sono d'accordo con essere falso o vero e dare loro altri valori. 13 00:01:16,066 --> 00:01:21,117 Poiché è un leggero interruttore e contacttype può prendere solo uno 14 00:01:21,117 --> 00:01:26,166 dei tre valori e il valore predefinito è già dato lì, 15 00:01:26,166 --> 00:01:30,470 e per il messaggio, possiamo renderlo non un valore richiesto. 16 00:01:30,470 --> 00:01:32,595 Se l'utente non desidera digitare commenti, 17 00:01:32,595 --> 00:01:36,030 è possibile consentire loro di non digitare commenti, ma se si desidera, è 18 00:01:36,030 --> 00:01:39,619 possibile aggiungere i validators.Required anche per il messaggio. 19 00:01:39,619 --> 00:01:46,890 Inoltre, quando si reimposta il modulo nel metodo onSubmit qui 20 00:01:46,890 --> 00:01:52,910 è possibile reimpostare il modulo al valore iniziale specificato 21 00:01:52,910 --> 00:01:57,630 nel metodo in cui è stato creato il modulo. 22 00:01:57,630 --> 00:02:05,100 Quindi all'interno del valore di reset, prende un oggetto come parametro qui. 23 00:02:05,100 --> 00:02:10,479 Questo oggetto verrà utilizzato dal metodo di reset facendo 24 00:02:10,479 --> 00:02:17,447 uso del metodo valore impostato che abbiamo visto nella lezione precedente per ripristinare 25 00:02:17,447 --> 00:02:24,192 il modulo alla condizione come era quando è stato creato originariamente. 26 00:02:24,192 --> 00:02:28,467 Quindi, qui possiamo fornire 27 00:02:28,467 --> 00:02:35,442 parametri come firstname: '', 28 00:02:35,442 --> 00:02:41,745 cognome: '', telnum: 0, 29 00:02:43,660 --> 00:02:47,219 Quindi e-mail: '' ', 30 00:02:49,160 --> 00:02:53,690 concordare: false, 31 00:02:53,690 --> 00:03:01,132 contacttype:' None ', 32 00:03:01,132 --> 00:03:07,940 messaggio:' ''});. 33 00:03:07,940 --> 00:03:11,206 Quindi questi valori che abbiamo fornito in questo 34 00:03:14,042 --> 00:03:19,081 oggetto JavaScript che ci diamo il parametro per il 35 00:03:19,081 --> 00:03:23,514 metodo di reset avranno esattamente gli stessi valori che abbiamo visto per 36 00:03:23,514 --> 00:03:28,168 queste proprietà quando abbiamo creato quel modulo di feedback. 37 00:03:28,168 --> 00:03:32,325 Abbiamo anche bisogno di resettare completamente il modulo nel modello. 38 00:03:32,325 --> 00:03:36,532 Quindi, per farlo, per tornare all'importazione qui, e 39 00:03:36,532 --> 00:03:43,130 poi importeremo anche ViewChild} da '@angular /core';. 40 00:03:43,130 --> 00:03:45,950 Questo ci permetterà di ottenere l'accesso a 41 00:03:45,950 --> 00:03:49,910 qualsiasi elemento dom figlio all'interno del mio modello. 42 00:03:49,910 --> 00:03:54,054 Quindi, dopo aver fatto questo, entrando nel codice, 43 00:03:54,054 --> 00:03:59,321 qui nel contactComponent, posso dire @ViewChild, 44 00:03:59,321 --> 00:04:04,250 e poi sarò in grado di fare riferimento al feedbackForm 45 00:04:04,250 --> 00:04:09,088 dandogli una variabile template con il nome fform. 46 00:04:09,088 --> 00:04:14,698 Lo farai nel passaggio successivo, e quindi così per questo, 47 00:04:14,698 --> 00:04:19,770 mi riferirò a questo usando feedbackformDirective. 48 00:04:21,890 --> 00:04:27,030 Quindi questo ci permette di ottenere l'accesso al modulo modello e quindi 49 00:04:27,030 --> 00:04:34,200 reimpostarlo completamente, in modo che il modulo stesso venga ripristinato al suo valore incontaminato. 50 00:04:34,200 --> 00:04:38,710 Quindi questo è un altro passo aggiuntivo che dobbiamo fare per garantire che il modulo sia 51 00:04:38,710 --> 00:04:43,470 completamente ripristinato al suo valore iniziale qui. 52 00:04:43,470 --> 00:04:50,268 Ora, dopo aver fatto questo nel metodo onSubject, dopo aver reimpostato l' 53 00:04:53,241 --> 00:04:58,669 oggetto feedbackForm stesso qui, abbiamo anche bisogno di aggiungere 54 00:04:58,669 --> 00:05:06,242 in this.feedbackformDirective.resetForm (); 55 00:05:08,355 --> 00:05:10,060 In là. 56 00:05:10,060 --> 00:05:15,045 Quindi questo assicurerà che il mio feedbackForm sia completamente ripristinato al suo 57 00:05:15,045 --> 00:05:18,400 valore incontaminato a questo punto. 58 00:05:18,400 --> 00:05:23,273 Quindi, dopo queste modifiche andiamo ora al nostro 59 00:05:23,273 --> 00:05:29,050 file modello per mostrare come possiamo riflettere questi 60 00:05:29,050 --> 00:05:33,630 errori nel nostro modello per il nostro modulo lì. 61 00:05:33,630 --> 00:05:35,730 Quindi, passando al file modello. 62 00:05:35,730 --> 00:05:39,490 Quindi, prima, andremo al pulsante qui, e 63 00:05:39,490 --> 00:05:44,705 poi faremo il pulsante Disabilitato. 64 00:05:46,924 --> 00:05:56,470 Se il «FeedbackForm non è valido». 65 00:05:56,470 --> 00:06:01,280 Quindi il pulsante sarà abilitato solo quando il FeedbackForm è valido. 66 00:06:01,280 --> 00:06:06,403 Passando a quel modulo mi permetta di aggiungere 67 00:06:06,403 --> 00:06:15,674