Criando uma aplicação (Internet Banking) com Angular 6: na prática e sem complicações – Parte 04 | iMasters
Chegamos na quarta parte da nossa série de artigos para o Training Center. Caso tenha perdido a primeira, segunda ou terceira parte, não deixe de acompanhar clicando nos links abaixo:
Como prometido, neste artigo vamos criar o cadastro de novos usuários. Também vamos gerar a autenticação da aplicação. Fique ligado nos recursos que implementaremos:
Salvar dados dos usuários no LocalStorage do navegador
Criar autenticação dos usuários (login)
Acessar o painel do usuário
Pré-requisitos: ter visto as primeiras partes publicadas. Let's go!
Se vocês seguiram todos os passos sugeridos nos artigos, sua aplicação deve estar parecida com isso:
Vamos utilizar a abordagem Formulários Reativos. Antes de começar a codar, é importante entender o conceito de um Formulário Reativo do Angular.
Simplificando: controlaremos todos os dados que são digitados no formulário. Inclusive acompanharemos, em tempo real, mudanças de informações passadas pelo usuário no formulário.
Nosso objetivo é a prática, então já sabe, né?
1. Adicione o método abaixo como atributo do form:
<form class="mt-5" (ngSubmit)='cadastro()' [formGroup]='formCadastro'>
<input type="text" class="form-control cadastro" placeholder="Nome" formControlName='nome'>
<input type="number" class="form-control cadastro" placeholder="CPF" formControlName='cpf'>
<input type="email" class="form-control cadastro" placeholder="E-mail" formControlName='email'>
<input type="tel" class="form-control cadastro" placeholder="Telefone" formControlName='telefone'>
<input type="text" class="form-control cadastro" placeholder="Endereço" formControlName='endereco'>
Calma! Não se desespere com um simples erro. Confesso pra vocês que eu me sentia muito frustado quando me deparava com erros. Até pensei em desistir de tudo – pensava que isso não era pra mim.
Mas preste atenção nas sábias palavras:
Para usar formulários reativos no Angular é preciso importar o pacote ReactiveFormsModule em seu arquivo app.module.ts. Siga os passos:
1. No app.module.ts importe o ReactiveFormsModule do pacote '@angular/forms':
2. Adicione o ReactiveFormsModule em seu array de importações "@NgModule":
Ainda estamos com erro, mas dessa vez eu grifei o erro. Ele encontra-se no arquivo HeaderComponent.html. Precisamos criar um controle de formulário para ele também. Será bem simples, pois esse component possui apenas o campo de CPF.
No arquivo headerComponent.ts atualize-o da seguinte forma:
1. Declare o atributo formGroup no formulário html:
2. Importe o FormBuilder do pacote '@angular/forms':
3. Injete no constructor:
1. Em nosso método cadastro, adicione as seguintes instruções:
Assim que clicarmos no botão "cadastro", o código acima vai converter os dados recebidos em String e logo abaixo estamos salvando essa conversão no LocalStorage.
Essa parte é bacana, mas para esse artigo não ficar muito grande e contornarmos melhor os possíveis problemas, resolvi deixar para o próximo artigo.
Bem, é isso. Espero vê-los na próxima parte.
Quero agradecer o feedback de vocês nos comentários. Não se esqueçam de compartilhar o artigo para ajudar quem precisa, e qualquer dúvida pinga nos comentários ou perguntem via Twitter.