Acabamos de aprender sobre o suporte Angular para formulários,
e, em particular, a forma orientada por modelos.
Neste exercício, criaremos um formulário orientado por modelo e, em seguida, incluiremos esse
em nosso diálogo componente de login que criamos no exercício anterior.
Nesta palestra o formulário orientado por modelo que criamos,
permite que o usuário digite seu nome de usuário e senha no formulário de login,
e, em seguida, envie essas informações para nosso aplicativo.
Agora, como essas informações são processadas pelo lado do servidor,
que é deixado para um curso posterior.
Mas, no momento, temos uma maneira de capturar o nome de usuário e senha
enviados pelo usuário através do formulário orientado por modelo de login,
que vamos projetar neste exercício.
Procedendo com o exercício,
o primeiro passo para ser capaz de alavancar o uso
de formulários orientados por modelo é ir para o aplicativo module.ts
arquivo e, em seguida, importar alguns módulos de suporte para a nossa aplicação.
Então, a primeira coisa que eu vou importar é
o MatFormFieldModule do campo de formulário de material angular
.
Então, isso nos permite agrupar um monte de itens em um campo de formulário lá.
Em seguida, também importaremos o MatInputModule.
O módulo de entrada suporta o componente de entrada que é
um componente Angular Material
estilizado que suporta o campo de formulário de entrada a partir de formulários HTML aqui.
Então, também, deixe-me importar um MatCheckBox,
o módulo correspondente da caixa de seleção Material Angular.
Então, esses três suportam
três elementos de formulário que vamos usar quando criamos nosso aplicativo.
O módulo de campo de formulário nos permite agrupar um monte de elementos de formulário lá.
O módulo de entrada nos permite criar um campo de entrada lá.
O módulo de caixa de seleção, como você esperaria,
nos permite criar uma caixa de seleção.
Além disso, também preciso importar
o FormsModule de formulários angulares.
O FormsModule é aquele que suporta formulários em Angular.
Este é o que suporta formulários orientados por modelo.
Então, agora que importamos estes, obviamente,
o próximo passo é ir para o decorador ngModule e, em seguida, puxá-los para o lugar aqui.
Então, vamos entrar aqui e, em seguida, inserir o FormsModule.
Deixe-me inserir o FormFieldModule,
o InputModule, o CheckBoxModule aqui.
Então, agora meu módulo de aplicativo está pronto
para suportar o uso de formulários orientados por modelo em nosso aplicativo.
Agora que concluímos isso,
vamos para o componente de login.
Grande parte do nosso trabalho está no componente de login.
Deixe-me primeiro projetar o formulário.
Então, indo para o arquivo de modelo de componente de login,
deixe-me adicionar no modelo para o nosso formulário para criar o formulário aqui.
Então, no topo,
Eu vou criar um p
que irá exibir as informações que eu digitei no formulário.
No código, teremos uma variável JavaScript chamada user,
que será vinculado aos campos neste formulário.
Agora, quando criarmos isso,
então ficará mais claro.
Agora, aqui, ao incluir isso,
o que estou habilitando é mostrar as mudanças.
À medida que digitamos informações no formulário,
as alterações correspondentes que acontecem no código para
refletem o estado do formulário podem ser mostradas ali.
Agora, além disso, agora vou criar o formulário aqui.
Então, vamos entrar e, em seguida, adicionar o elemento formulário aqui.
Para este elemento de formulário,
Eu vou aplicar
o atributo novalidate aqui porque
queremos que a validação de formulário a ser cuidado por Angular e não
pela validação de formulário HTML padrão
que o suporte do navegador.
Então, vamos mudar essa responsabilidade para o nosso aplicativo Angular em si.
Então, é por isso que especifico o atributo novalidate para o meu telefone.
Então, isso cria meu formulário aqui.
Aqui dentro, eu vou usar o conteúdo mat-dialog-.
Agora, o mat-dialog-content, como você esperaria,
é uma área que contém o conteúdo da caixa de diálogo em si.
Então, é por isso que colocamos esse conteúdo de caixa de diálogo aqui.
Então, aqui, eu vou criar meu formulário aqui.
Então, eu coloquei um p lá.
Dentro desse p, vou usar um mat-forma-campo aqui.
Então, o mat-form-field me permite agrupar um conjunto
de elementos relacionados ao formulário que eu uso juntos.
Então, aqui, vou colocar na entrada aqui.
Então, o campo de formulário de entrada de formulários de arquivo HTML.
Então, para isso, vou aplicar o atributo matInput
que nos permitirá aplicar o estilo de design de material para esta entrada.
Em seguida, vamos dar um espaço reservado para isso como nome de usuário,
e como você esperaria,
eo tipo será o tipo de texto aqui.
Deixe-me adicionar no NGModel.
Então, um formulário orientado por modelo é suportado através do atributo ngModel aqui.
Então, com o NGModel.
Então, você pode ver a forma de caixa de entrada banana de declarar isso.
Em seguida, diremos user.username.
Então, este usuário vai ser um objeto JavaScript no meu arquivo TypeScript,
que irá conter uma propriedade de nome de usuário lá,
que irá rastrear o valor que você inserir neste campo de entrada no meu formulário lá.
Então, é por isso que estamos amarrando essas informações de campo de entrada para este objeto JavaScript.
Então, esta é a ligação de dados bidirecional que estamos fazendo
entre o elemento de formulário e o código JavaScript correspondente.
Em seguida, vamos dar a este um nome como nome de usuário aqui.
Então, esse é o meu primeiro campo de formulário que eu adicionei aqui.
Agora, da mesma forma, adicionarei no segundo campo de formulário para a senha.
Então, para isso, deixe-me apenas copiar isso e, em seguida, colá-lo aqui.
Então, o segundo campo seria Input, MatInput,
espaço reservado é password,
e, em seguida, o tipo é password.
Então, o elemento de entrada de senha do suporte formulário HTML5.
O NGModel em si será vinculado à senha do usuário e o nome seria senha.
Então, você vê que o objeto JavaScript do usuário agora contém duas propriedades,
nome de usuário e senha, que rastreará as credenciais do usuário aqui.
Então, estes dois campos de formulário dentro deste p aqui,
e, em seguida, também vamos adicionar em um
mais chamado como mat-checkbox.
Você viu que tínhamos incluído o módulo de caixa de seleção anteriormente.
Então, vamos adicionar isso.
Agora, esta caixa de seleção que quando marcada informará
meu aplicativo Angular que o nome de usuário e senha devem ser salvos no aplicativo.
Então, deixe-me amarrar isso com o modelo NG para
uma propriedade correspondente chamada remember no objeto de usuário.
Então, esta será,
esta propriedade será verdadeira ou falsa dependendo
se a caixa de seleção está marcada ou desmarcada.
Então, é assim que rastreamos.
Então, estamos fazendo a ligação de dados bidirecional entre esta caixa de seleção e
esta propriedade chamada remember do objeto JavaScript usuário no meu código lá.
Então o nome seria lembrar,
e então vamos dar a este um rótulo como lembrar de mim.
Então, quando o usuário verificar isso,
então as informações do usuário serão lembradas aqui.
Então, essa é a caixa de seleção mat-que adicionamos.
Então, temos três campos aqui,
o nome de usuário, a senha,
e, em seguida, uma caixa de seleção aqui no meu formulário aqui.
Então, este é um conteúdo mat-diálogo aqui.
Agora, além do conteúdo de diálogo mat-,
Eu também posso adicionar ações de diálogo mat-aqui.
Agora, as ações de diálogo podem conter os botões que correspondem a esta caixa de diálogo.
Então, isso é o que vai atuar como os botões de ação no diálogo,
e também como eles estão dentro do formulário,
esses botões também funcionarão como botões de envio de formulário para mim.
Então, aqui, deixe-me fazer um espaçador flex classe span,
e, em seguida, deixe-me adicionar um botão,
mat-button, e então este botão,
Eu também vou transformar isso em um botão de fechamento mat-diálogo.
Então, este seria um botão de cancelamento que eu vou incluir no meu formulário aqui,
então isso é clicado o diálogo será demitido,
e essencialmente o que significa que você não está enviando o formulário lá.
Então, que também funciona como o botão cancelar para o formulário,
e, em seguida, também dispensar o diálogo ao mesmo tempo.
Então, usando este atributo para este botão,
estamos declarando isso como o botão que dispensar a falha,
da mesma forma que temos este botão na barra de ferramentas.
Então, a caixa de diálogo de tapetes fecha lá.
Então outro botão que teremos é
para enviar para que
este tipo de botão seria o botão enviar dentro de um formulário lá.
Então, quando isso é clicado,
que aciona a submissão do formulário para este formulário aqui,
e, em seguida, deixe-me adicionar em uma classe a isso,
vamos dizer fundo primário, e texto floral.
Essas classes que eu já adicionei ao meu arquivo Styles.acss lá.
Então, texto floral branco,
e este botão seria rotulado como o botão de login lá.
Então, este seria um botão de cor azul que será mostrado na tela lá.
Então, com isso, minha estrutura de formulário é criada no modelo lá.
Agora, o próximo passo é ir para o código e, em seguida, lidar com a submissão do formulário em si.
Então, agora indo para o arquivo component.ts login,
precisamos lidar com a submissão do formulário aqui.
Agora, o primeiro passo que eu vou fazer é quando este componente de login é criado,
vamos criar um objeto de usuário aqui com as propriedades nome de usuário,
que seria uma string vazia para começar com,
senha que também será uma string vazia para começar,
e, em seguida, lembre-se qual é falsa.
Agora, declarando isso aqui,
nós também estamos dizendo que agora podemos amarrar em
essas três propriedades aos três elementos de formulário no meu modelo.
Então, isso é o que acabamos alcançando aqui.
Para o construtor, vamos
me injetar o diálogo ref aqui,
mat-diálogo ref, e este ref diálogo mat tomará o componente correspondente.
Então, esta é uma referência a este componente de login aqui.
Então, isso nos diz quando esta- quando este é submetido,
como lidar com isso.
Então, aqui, deixe-me adicionar em uma função on submit aqui,
e dentro da função on submit,
Eu vou simplesmente fazer login,
registrar as informações de usuários correspondentes,
então o usuário clica no formulário de login,
o formulário de login e envia o formulário de login.
Eu só vou registrar as informações do usuário no console no momento.
Mais tarde, vamos projetar no curso do lado do servidor.
Nós vamos lidar com o processo de login real quando
nosso servidor está pronto e é capaz de lidar com o login do usuário.
Então, depois disso, vamos dizer que este diálogo ref fechar.
Agora, por que incluímos isso aqui?
Então, quando o formulário é enviado,
nós também queremos descartar o componente lá,
o componente de diálogo lá.
Então, chamando isso,
este diálogo ref fechar,
estamos pedindo que o componente diálogo seja fechado aqui.
Então, essa é a razão pela qual eu recebo uma referência ao componente de login aqui,
que está agindo como meu componente de diálogo aqui.
Então, seremos capazes de fechar o componente de diálogo fazendo isso.
Assim, uma vez que o usuário envia o formulário,
você registrará as informações do usuário,
e, em seguida, fechará a caixa de diálogo. É isso.
Vamos salvar as alterações e, em seguida, ir e dar uma olhada no aplicativo atualizado.
Vá para o nosso aplicativo no navegador,
deixe-me abrir o Console JavaScript para que você possa ver as informações que estão sendo logadas.
Deixe-me abrir a caixa de diálogo de login aqui com o formulário já no lugar,
o nome de usuário e senha já no lugar.
Então, deixe-me digitar o nome de um usuário.
Estou sendo narcisista aqui.
Então, estou digitando o nome de usuário e senha aqui.
Agora, observe que à medida que eu digitar as informações aqui,
já que estou mostrando o valor do objeto JavaScript do usuário aqui,
todas as alterações que eu fizer estão imediatamente sendo refletidas na tela aqui.
Também a caixa de seleção lembrar sendo marcada e desligada aqui.
Então, quando eu enviar o formulário aqui,
você pode ver que no console,
as informações do usuário são registradas no console,
o nome de usuário, a senha,
e o valor de lembrar está bloqueado no console.
Então, agora você pode ver que meu formulário de login,
o formulário orientado por modelo está funcionando corretamente.
Com isso, completamos este exercício,
onde vimos como podemos projetar uma forma orientada por modelo em nossa aplicação Angular.
Este é um bom momento para você fazer um Git Commit com a mensagem,
Modelo Driven Forms Parte 1.