Abbiamo appena imparato a conoscere il supporto angolare per le forme,
e in particolare, la forma guidata dal modello.
In questo esercizio creeremo un modulo basato su modelli e quindi includerlo
nel dialogo dei componenti di accesso creato nell'esercizio precedente.
In questa lezione il modulo basato sul modello che creiamo,
consente all'utente di digitare il proprio nome utente e password nel modulo di login,
e quindi inviare queste informazioni alla nostra applicazione.
Ora, come queste informazioni vengono elaborate dal lato server,
che viene lasciato a un corso successivo.
Ma per il momento, abbiamo un modo per catturare il nome utente e la password
inviati dall'utente attraverso il modulo basato sul modello di accesso,
che progetteremo in questo esercizio.
Procedendo con l'esercizio,
il primo passo per essere in grado di sfruttare l'uso
di moduli basati su modelli è quello di andare al
file module.ts app e quindi importare alcuni moduli di supporto per la nostra applicazione.
Quindi, la prima cosa che sto per importare è
il MatFormFieldModule dal
campo modulo materiale angolare.
Quindi, questo ci permette di raggruppare insieme un gruppo di elementi in un campo modulo lì.
Quindi, ci sarà anche importare il MatInputModule.
Il modulo di input supporta il componente di input che è
un componente materiale angolare stilizzato
che supporta il campo modulo di input da moduli HTML qui.
Quindi, anche, fammi importare un MatCheckBox,
il modulo corrispondente dalla casella di controllo Angular Material.
Quindi, questi tre supportano
tre elementi del modulo che useremo quando creiamo la nostra applicazione.
Il modulo campo modulo ci permette di raggruppare insieme un gruppo di elementi del modulo lì.
Il modulo di input ci permette di creare un campo di input in là.
Il modulo checkbox, come ci si aspetterebbe,
ci permette di creare una casella di controllo.
Inoltre, ho anche bisogno di importare
il FormsModule dalle forme angolari.
Il FormsModule è quello che supporta le forme in Angular.
Questo è quello che supporta i moduli basati su modelli.
Quindi, ora che li abbiamo importati, ovviamente,
il passo successivo è quello di andare nel decoratore ngModule e poi tirarli in posizione qui.
Quindi, entreremo qui e poi inseriremo il FormsModule.
Lasciami inserire il FormFieldModule,
l'InputModule, il CheckBoxModule qui.
Quindi, ora il mio modulo app è pronto
a supportare l'uso di moduli basati su modelli nella nostra applicazione.
Ora che abbiamo completato questo,
andiamo al componente di login.
Gran parte del nostro lavoro è nel componente di login.
Permettetemi prima di progettare il modulo.
Quindi, andando nel file del modello del componente di login,
lasciami aggiungere il modello per il nostro modulo per creare il modulo qui.
Quindi, in alto,
creerò una p
che visualizzerà le informazioni che ho digitato nel modulo.
Nel codice, avremo una variabile JavaScript chiamata utente,
che sarà legato ai campi in questo modulo.
Ora, quando lo creeremo,
allora diventerà più chiaro.
Ora, qui, includendo questo,
ciò che sto abilitando è mostrare i cambiamenti.
Mentre digitiamo le informazioni nel modulo,
le modifiche corrispondenti che avvengono nel codice per
riflettere lo stato del modulo possono essere mostrate proprio lì.
Ora, inoltre, ora ho intenzione di creare il modulo qui.
Quindi, entreremo e poi aggiungiamo l'elemento del modulo qui.
A questo elemento del modulo,
ho intenzione di applicare
l'attributo novalidate qui perché
vogliamo che la convalida del modulo sia curata da Angular e non
dalla convalida del modulo HTML standard
supportata dal browser.
Quindi, stiamo andando a spostare quella responsabilità nella nostra applicazione angolare stessa.
Quindi, ecco perché specifico l'attributo novalidate per il mio telefono.
Quindi, questo crea la mia forma qui.
Qui dentro, ho intenzione di usare il mat-dialog-content.
Ora, il mat-dialog-content, come ci si aspetterebbe,
è un'area che contiene il contenuto della finestra di dialogo stessa.
Quindi, è per questo che abbiamo messo quel mat-dialog-content qui.
Poi, qui dentro, creerò il mio modulo qui.
Quindi, ho messo una p lì.
All' interno di quella p, userò un campo mat-form qui.
Quindi, il campo mat-form-mi consente di raggruppare insieme un insieme
di elementi correlati al modulo che uso insieme.
Quindi, qui dentro, inserirò l'input qui.
Quindi, il campo modulo di input da moduli di file HTML.
Quindi, a questo, applicherò l'attributo matInput
che ci consentirà di applicare lo stile di progettazione del materiale per questo input.
Quindi, daremo un segnaposto per questo come nome utente,
e come ci si aspetterebbe,
e il tipo sarà tipo di testo qui.
Permettetemi di aggiungere il ngModel.
Quindi, un modulo basato su modelli è supportato attraverso l'attributo ngModel qui.
Quindi, con il ngModel.
Quindi, puoi vedere il modo della casella di posta della banana di dichiararlo.
Quindi, diremo user.username.
Quindi, questo utente sarà un oggetto JavaScript nel mio file TypeScript,
che conterrà una proprietà username lì,
che monitorerà il valore che inserisci in questo campo di input nel mio modulo lì.
Quindi, è per questo che stiamo legando queste informazioni sul campo di input in questo oggetto JavaScript.
Quindi, questo è l'associazione dati bidirezionale che stiamo facendo
tra l'elemento modulo e il codice JavaScript corrispondente.
Quindi, daremo a questo un nome come nome utente qui.
Quindi, questo è il mio primo campo modulo che ho aggiunto qui.
Ora, allo stesso modo, aggiungerò nel secondo campo modulo per la password.
Quindi, per questo, lasciami copiare questo e poi incollarlo qui.
Quindi, il secondo campo sarebbe Input, MatInput,
segnaposto è password,
e quindi il tipo è password.
Quindi, l'elemento di input della password dal supporto del modulo HTML5.
Il ngModel stesso sarà legato alla password dell'utente e il nome sarebbe password.
Quindi, si vede che l'oggetto JavaScript utente ora contiene due proprietà,
nome utente e password, che terrà traccia delle credenziali dell'utente qui.
Così, questi due campi modulo all'interno di questo p qui,
e poi anche aggiungeremo in un
altro chiamato come mat-checkbox.
Hai visto che in precedenza avevamo incluso il modulo checkbox.
Quindi, abbiamo intenzione di aggiungere in questo.
Ora, questa casella di controllo che, quando selezionata, informerà
la mia applicazione Angular che il nome utente e la password devono essere salvati nell'applicazione.
Quindi, lasciami legare questo con il modello NG a
una proprietà corrispondente chiamata ricorda nell'oggetto utente.
Quindi, questo sarà,
questa proprietà sarà vera o falsa a seconda
che la casella di controllo sia spuntata o deselezionata.
Quindi, e' questo il modo in cui rintracciamo.
Quindi, stiamo facendo l'associazione dati bidirezionale tra questa casella di controllo e
questa proprietà chiamata ricordare l'oggetto JavaScript utente nel mio codice lì.
Allora il nome sarebbe ricordare,
e poi daremo a questo un'etichetta come ricordo di me.
Quindi, quando l'utente controlla questo,
le informazioni dell'utente verranno ricordate qui.
Quindi, questa è la casella di controllo mat-che abbiamo aggiunto.
Quindi, abbiamo tre campi qui,
il nome utente, la password,
e poi una casella di controllo qui nel mio modulo qui.
Quindi, questo è un contenuto mat-dialogo qui.
Ora, oltre al contenuto mat-dialogue,
posso anche aggiungere azioni mat-dialogue qui.
Ora, le azioni di dialogo possono contenere i pulsanti che corrispondono a questa finestra di dialogo.
Quindi, questo è ciò che fungerà da pulsanti di azione nel dialogo,
e anche dal momento che sono racchiusi all'interno del modulo,
questi pulsanti fungeranno anche da pulsanti di invio del modulo per me.
Quindi, qui, lasciami fare un distanziatore flex classe span,
e poi lasciami aggiungere un pulsante, un pulsante
mat-button, e poi questo pulsante,
lo trasformerò anche in un pulsante di chiusura della finestra di dialogo del tappetino.
Quindi, questo sarebbe un pulsante di annullamento che includerò nel mio modulo qui,
quindi questo viene cliccato il dialogo verrà respinto,
e essenzialmente il che significa che non stai inviando il modulo lì.
Quindi, questo funge anche da pulsante di annullamento per il modulo,
e quindi anche respingendo il dialogo allo stesso tempo.
Quindi, usando questo attributo a questo pulsante,
stiamo dichiarando questo come il pulsante che respinge l'errore,
allo stesso modo in cui abbiamo questo pulsante nella barra degli strumenti.
Quindi, la finestra di dialogo del tappetino si chiude lì.
Poi altro pulsante che avremo è
per inviare in modo che
questo tipo di pulsante sarebbe il pulsante di invio all'interno di un modulo lì.
Quindi, quando si fa clic su questo,
che attiva l'invio del modulo per questo modulo qui,
e quindi lasciami aggiungere in una classe a questo,
diremo sfondo primario e testo floreale.
Queste classi che ho già aggiunto nel mio file Styles.acss lì.
Quindi, testo floreale bianco,
e questo pulsante sarebbe etichettato come il pulsante di accesso lì.
Quindi, questo sarebbe un pulsante di colore blu che verrà mostrato nello schermo lì.
Quindi, con questo, la mia struttura del modulo viene creata nel modello lì.
Ora, il passo successivo è quello di andare nel codice e quindi gestire l'invio del modulo stesso.
Quindi, ora andando al login component.ts file,
abbiamo bisogno di gestire l'invio del modulo qui.
Ora, il primo passo che ho intenzione di fare è quando questo componente di login viene creato,
creeremo un oggetto utente qui con il nome utente delle proprietà,
che sarebbe una stringa vuota per cominciare,
password che sarà anche una stringa vuota per cominciare,
e poi ricordare quale è falso.
Ora, dichiarando questo qui,
stiamo anche dicendo che ora possiamo legare in
queste tre proprietà ai tre elementi del modulo nel mio modello.
Quindi, questo è quello che abbiamo finito per raggiungere qui.
Per il costruttore,
permettetemi di iniettare qui il ref del dialogo, il
ref del mat-dialog, e questo mat dialog ref prenderà il componente corrispondente.
Quindi, questo è un riferimento a questo componente di login qui.
Quindi, questo ci dice quando questo... quando questo viene presentato,
come gestirlo.
Quindi, qui, lasciami aggiungere una funzione on submit qui,
e all'interno della funzione on submit,
ho intenzione di
accedere semplicemente, registrare le informazioni degli utenti corrispondenti,
quindi l'utente fa clic sul modulo di login,
il modulo di login e invia il modulo di login.
Al momento ho solo intenzione di registrare le informazioni dell'utente sulla console.
Più tardi, progetteremo nel corso lato server.
Gestiremo il processo di login effettivo quando
il nostro server è pronto ed è in grado di gestire il login dell'utente.
Quindi, dopo questo, diremo questo dialogo ref vicino.
Ora, perché includiamo questo qui?
Quindi, quando il modulo viene presentato,
vogliamo anche respingere la componente lì,
la componente di dialogo lì.
Quindi, chiamando questo,
questo dialogo ref close,
chiediamo che la componente dialoghi sia chiusa qui.
Quindi, questo è il motivo per cui ottengo un riferimento al componente di login qui,
che agisce come il mio componente di dialogo qui.
Quindi, saremo in grado di chiudere il componente finestra di dialogo facendo questo.
Pertanto, una volta
che l'utente invia il modulo, verranno registrate le informazioni utente
e quindi chiudere la finestra di dialogo. Questo è tutto.
Salviamo le modifiche e poi andiamo a dare un'occhiata all'applicazione aggiornata.
Vai nella nostra applicazione nel browser,
lasciami aprire la Console JavaScript in modo che tu possa vedere le informazioni che hai effettuato l'accesso.
Permettetemi di aprire la finestra di dialogo di accesso qui con il modulo già in atto,
il nome utente e la password già in atto.
Quindi, lasciami digitare il nome di un utente.
Sono narcisista qui.
Quindi, sto digitando il nome utente e la password qui.
Ora, si noti che mentre digito le informazioni qui,
poiché sto mostrando il valore dell'oggetto JavaScript dell'utente qui,
tutte le modifiche che apporto vengono immediatamente riflesse sullo schermo qui.
Anche la casella di controllo ricorda che viene spuntata e spunta qui.
Quindi, quando invio il modulo qui,
puoi vedere che nella console,
le informazioni dell'utente vengono registrate nella console,
il nome utente, la password
e il valore di ricordo è bloccato alla console.
Quindi, ora puoi vedere che il mio modulo di accesso,
il modulo guidato dal modello funziona correttamente.
Con questo, completiamo questo esercizio,
in cui abbiamo visto come possiamo progettare una forma guidata da template nella nostra applicazione angolare.
Questo è un buon momento per fare un Git Commit con il messaggio,
Template Driven Forms Parte 1.