[MUSIC]
Ora che abbiamo avuto una rapida introduzione alla convalida dei moduli reattivi
nella lezione precedente, passiamo all'esercizio successivo in cui potremmo
applicare la convalida del modulo al modulo reattivo creato nell'esercizio precedente.
Quindi, andando al nostro file dattiloscritto componente di contatto,
aggiungiamo i validatori del modulo a ciascuna di queste proprietà all'interno del nostro modello di modulo.
Quindi per il primo nome direi all'interno dell'array, Validatori.
Obbligatorio, Allo
stesso modo applicherò lo stesso al, cognome.
Poi e-mail, e anche per il telnum, quindi per
il telnum direi per i restanti tre posso lasciarli aperti,
perché sono d'accordo con essere falso o vero e dare loro altri valori.
Poiché è un leggero interruttore e contacttype può prendere solo uno
dei tre valori e il valore predefinito è già dato lì,
e per il messaggio, possiamo renderlo non un valore richiesto.
Se l'utente non desidera digitare commenti,
è possibile consentire loro di non digitare commenti, ma se si desidera, è
possibile aggiungere i validators.Required anche per il messaggio.
Inoltre, quando si reimposta il modulo nel metodo onSubmit qui
è possibile reimpostare il modulo al valore iniziale specificato
nel metodo in cui è stato creato il modulo.
Quindi all'interno del valore di reset, prende un oggetto come parametro qui.
Questo oggetto verrà utilizzato dal metodo di reset facendo
uso del metodo valore impostato che abbiamo visto nella lezione precedente per ripristinare
il modulo alla condizione come era quando è stato creato originariamente.
Quindi, qui possiamo fornire
parametri come firstname: '',
cognome: '', telnum: 0,
Quindi e-mail: '' ',
concordare: false,
contacttype:' None ',
messaggio:' ''});.
Quindi questi valori che abbiamo fornito in questo
oggetto JavaScript che ci diamo il parametro per il
metodo di reset avranno esattamente gli stessi valori che abbiamo visto per
queste proprietà quando abbiamo creato quel modulo di feedback.
Abbiamo anche bisogno di resettare completamente il modulo nel modello.
Quindi, per farlo, per tornare all'importazione qui, e
poi importeremo anche ViewChild} da '@angular /core';.
Questo ci permetterà di ottenere l'accesso a
qualsiasi elemento dom figlio all'interno del mio modello.
Quindi, dopo aver fatto questo, entrando nel codice,
qui nel contactComponent, posso dire @ViewChild,
e poi sarò in grado di fare riferimento al feedbackForm
dandogli una variabile template con il nome fform.
Lo farai nel passaggio successivo, e quindi così per questo,
mi riferirò a questo usando feedbackformDirective.
Quindi questo ci permette di ottenere l'accesso al modulo modello e quindi
reimpostarlo completamente, in modo che il modulo stesso venga ripristinato al suo valore incontaminato.
Quindi questo è un altro passo aggiuntivo che dobbiamo fare per garantire che il modulo sia
completamente ripristinato al suo valore iniziale qui.
Ora, dopo aver fatto questo nel metodo onSubject, dopo aver reimpostato l'
oggetto feedbackForm stesso qui, abbiamo anche bisogno di aggiungere
in this.feedbackformDirective.resetForm ();
In là.
Quindi questo assicurerà che il mio feedbackForm sia completamente ripristinato al suo
valore incontaminato a questo punto.
Quindi, dopo queste modifiche andiamo ora al nostro
file modello per mostrare come possiamo riflettere questi
errori nel nostro modello per il nostro modulo lì.
Quindi, passando al file modello.
Quindi, prima, andremo al pulsante qui, e
poi faremo il pulsante Disabilitato.
Se il «FeedbackForm non è valido».
Quindi il pulsante sarà abilitato solo quando il FeedbackForm è valido.
Passando a quel modulo mi permetta di aggiungere
<mat-error *ngif="feedbackform.get» get
('firstname') .hasError ('required')
&&
feedbackform.get ('firstname')
.touched», e il messaggio è Nome è richiesto.
Quindi questo sarebbe il messaggio che assegni usando una singola riga con il nascosto,
con queste informazioni lì.
Permettetemi di applicare la stessa cosa al cognome, al
numero di telefono e all'e-mail.
Quindi ho solo intenzione di copiare, incollare e modificarli, in
modo da poter procedere avanti con quelli, e ('cognome').
Cognome.
Telnum.
Quindi lo applico a ('telnum').
Ancora una volta, la stessa idea dietro che e poi anche per e-mail.
( «e-mail»).
Aggiungiamo la variabile modello chiamata fform al modulo.
Quindi digito #fform = «ngForm».
Andando al nostro modulo nel browser, lasciami digitare il nome,
e vedi che anche se cancello il valore rimarrà verde,
perché abbiamo usato il toccato lì.
Ma nel momento in cui mi allontani da esso allora
sarai in grado di vedere che diventa un colore rosso.
Quindi allo stesso modo per il Cognome vedrai che quando
rimuovo il valore Cognome, allora questo è mostrato lì in modo simile.
Permettetemi di digitare il nome e il cognome, e anche per l'e-mail.
Il, Stesso caso per il numero di telefono anche.
Quindi, in questo modo, puoi fare la convalida del modulo nella nostra applicazione.
Con questo, completiamo questo esercizio dove abbiamo
aggiunto nella convalida del modulo al nostro modulo reattivo.
Questo è un buon momento per fare un commit git con il messaggio,
moduli reattivi parte due.
[ MUSIC]