[MUSICA]
È ora di passare al terzo incarico in questo corso.
In questo incarico, come si potrebbe già previsto,
vedremo forme angolari e osservabili.
Questo è ciò che abbiamo imparato in questo particolare modulo del corso.
In questo incarico, verrà progettato un modulo
all'interno della vista dei componenti di dettaglio piatto che consentirà
agli utenti di inviare il loro commento su un piatto specifico.
Userai moduli reattivi angolari per progettare il modulo e
userai le modifiche di valore osservabili
per avviare la convalida del modulo,
proprio come abbiamo fatto nell'esercizio che hai appena completato e
userai un nuovo componente materiale angolare chiamato
Materiale angolare Componente di scorrimento.
Il componente slider verrà utilizzato per inserire la valutazione per
il piatto dalla persona che invia il conteggio.
Diamo un'occhiata ai tre compiti in questo compito in modo più dettagliato.
Quindi qui, vi sto mostrando il loro primo piatto dal menu
per illustrarvi i tre compiti che devono essere completati in questo compito.
Quindi, in questo incarico, creeremo un modulo
nella sezione commenti del componente dettaglio piatto.
Il modulo contiene due campi qui.
Il campo nome e un campo commento.
Nel campo nome, il nome dell'autore per il commento verrà inserito dall'utente.
Quindi nel loro campo di commento che è un'area di testo,
si permetterà all'autore di inserire il commento che vogliono inviare.
Inoltre, al fine di ottenere la valutazione per il piatto,
useremo questo componente materiale angolare chiamato cursore materiale angolare.
Per questo componente slider,
un collegamento alla documentazione è fornito nelle risorse aggiuntive.
Il componente slider è abbastanza semplice da creare.
Per questo componente di scorrimento, verranno visualizzati i segni di graduazione in questo modo.
Quindi puoi vedere che hai gia' uno, due, tre, quattro segni di
graduazione e il quinto e' proprio sotto questo pollice.
Così e anche quando si mostra la vista pollice,
mostrerà il taglio nella valutazione selezionata come il.
Quindi, questo deve essere etichettato nella diapositiva angolare del componente che includi
nel loro carattere e questo ti permetterà di selezionare la valutazione per il piatto.
Quindi, questo è il tuo primo compito in questo incarico.
Il secondo compito consiste nell'aggiungere la convalida del modulo per questo modulo.
Ora questo modulo dovrebbe essere creato utilizzando i caratteri reattivi angolari e
anche utilizzando le modifiche di valore osservabili al fine di osservare
eventuali modifiche a uno di questi elementi di controllo del modulo lei.
E ogni volta che si verifica una modifica, è necessario avviare immediatamente
la convalida del modulo utilizzando le modifiche di valore osservabili proprio come abbiamo fatto
nell'esercizio appena completato nella lezione precedente.
Ora, la convalida che è necessario eseguire è che sia il nome che
il commento sono campi obbligatori.
Inoltre, il nome deve contenere almeno due caratteri.
Quindi, se digito solo un carattere, allora dovresti mostrare un messaggio qui che dice,
Nome autore deve essere lungo almeno due caratteri.
Ora, se naturalmente, digitiamo di più, allora sparirà.
Se si rimuove completamente il nome dal campo,
viene visualizzato un messaggio che dice, Nome autore è obbligatorio.
Quindi, il messaggio richiesto dovrebbe essere visualizzato qui.
Quindi, non appena digito almeno due caratteri,
il messaggio scomparirà.
Ora anche per il campo commento, questo è un campo obbligatorio.
Quindi, è necessario digitare almeno alcuni caratteri.
Non vi è alcuna restrizione sul numero di caratteri.
Ma se non vengono digitati caratteri quando si visualizza il messaggio qui dicendo,
commentare come richiesto.
Se il modulo non è attualmente valido, il pulsante di invio non funzionerà.
Ma una volta che il modulo diventa valido, il pulsante di invio funzionerà e
dovrebbe consentire di inviare il carattere.
Quindi, questo è il secondo compito del tuo incarico.
Il compito difficile nel tuo compito è che non appena il modulo contiene informazioni valide,
dovresti visualizzare un'anteprima di ciò che hai appena inviato nel modulo.
Lasciami digitare qualcosa di più significativo qui, in modo che siano
anteprima sembra interessante.
Quindi vedi che non appena digiti informazioni valide nel tuo modulo,
dovresti mostrare un'anteprima di
come apparirà il commento se viene aggiunto in quell'elenco di commenti per il piatto.
Ora nota che nell'anteprima non hai ancora visualizzata la data.
Quindi, questa è un'altra cosa che devi tenere a mente.
Se il modulo diventa non valido, l'anteprima scompare.
Ma non appena il modulo diventa valido, l'anteprima riapparirà.
Quindi, questo è qualcosa che dovresti progettare in modo appropriato utilizzando l'elenco ND e
quindi assicurarti che il modulo sia valido prima di visualizzare queste informazioni lì.
Quindi, questa è l'anteprima.
Ora, quando l'utente fa clic sul pulsante Invia,
ci sono alcune cose che devi fare.
Quando l'utente fa clic sul pulsante Invia, questo commento verrà
aggiunto all'elenco dei commenti che hai per questo particolare piatto.
Quindi, lasciami fare clic sul pulsante di invio e noterai immediatamente che il modulo
è stato aggiunto nell'elenco dei commenti per questo particolare piatto.
Quindi, vedi che l'ultimo commento che ho appena inserito è stato aggiunto qui.
Si noti inoltre che la data per
il modulo è stata aggiunta nel commento qui.
Quindi dovresti prendere i valori dal modello del modulo e
quindi copiarlo in un modello di dati, quindi premi il commento
nel raggio dell'oggetto JavaScript dei commenti per l'oggetto piatto.
Quindi, questo è qualcosa che devi fare usando il metodo push dell'array per l'
array di oggetti JavaScript.
Inoltre, la data dovrebbe essere automaticamente configurata e
aggiunta a tale modello di dati.
Ricordare che il modello di modulo non contiene la data, ma
il modello di dati che è derivato dalla classe di commento che abbiamo progettato,
il modello di dati contiene l'autore, la valutazione, il commento e la data.
Quindi, è necessario aggiungere la data nel modello di dati.
Quindi, questo è dove si farà uso della
classe data Java Script insieme alla conversione in una
stringa ISO prima di memorizzare nel campo data del modello di dati del commento.
Ora vi ho fornito collegamenti ad esempi di come è possibile
creare la data e come si può convertire la data in una
stringa ISO nella documentazione per questa assegnazione,
e anche nelle risorse aggiuntive per questo elemento.
Quindi, per favore cerca per capire come dovresti
aggiungere la data a quel campo di commento lì.
E una volta che il commento viene inserito nella serie di commenti,
allora si unirà al resto dei commenti per quel particolare piatto.
Devi ricordare che non stiamo salvando questo sul lato server,
perché non abbiamo un lato server.
Quindi, se ricarichi la tua pagina, quel commento scomparirà.
Questo è perfettamente accettabile.
In questa fase, non stiamo cercando di salvare le modifiche
al piatto sul server attraverso il nostro servizio di piatti.
Che faremo in uno dei cicli successivi.
Quindi in questo momento, se ricarichi questa pagina, il commento che hai appena inserito
scomparirà, ma questo è perfettamente accettabile.
Quindi, questo è il terzo compito del tuo incarico.
Dopo aver completato tutte e tre le attività, assicurarsi che tutto funzioni
correttamente prima di inviare la soluzione di assegnazione al sistema.
[ MUSIC]