Criando uma aplicação (Internet Banking) com Angular 6: na prática e sem complicações – Parte 04

Fala, pessoal!

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:

• Parte 01
• Parte 02
• Parte 03

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:

• Cadastro dos usuários
• 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!

Onde paramos

Se vocês seguiram todos os passos sugeridos nos artigos, sua aplicação deve estar parecida com isso:

Cadastro de usuários

Essa parte é muito bacana! Vamos guardar alguns dos dados digitados no formulário no LocalStorage. Para quem não sabe, o LocalStorage é um espaço disponível nos navegadores onde podemos armazenar informações. Seu limite varia de navegador para navegador. No Chrome, por exemplo, o limite é de 5MB de dados, por origem.

Em uma aplicação real, jamais guardaríamos dados importantes no navegador. Normalmente, usamos um Banco de Dados↳Banco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data → pra isso.

Basicamente, qualquer site guarda informações no LocalStorage. Veja:

Obtendo os dados digitados no formulário

Vamos utilizar a abordagem Formulários Reativos. Antes de começar a codar, é importante entender o conceito de um Formulário Reativo do Angular↳Angular30 conteúdosCriando Micro Frontends Angular com Native FederationDev (Back & Front) · mar 2026Angular v21 e o Fim da Cobertura de Testes Exclusivamente em TypeScript: Por Que Precisamos Repensar os Testes de ComponentesDev (Back & Front) · jan 2026Angular 8 é lançado com builder APIs e suporte web workerDev (Back & Front) · mai 2019Ver tudo em Dev (Back & Front) →.

Formulários reativos fornecem uma abordagem orientada a modelo para manipular entradas no formulário cujo os valores mudam o tempo todo.

—Documentação do angular.io.

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.

A documentação explica de forma detalhada sobre os formulário reativos, mas no momento já sabemos o básico para prosseguir.

Nosso objetivo é a prática, então já sabe, né?

Criando controles para nosso formulário

Abra o arquivo cadastro-clientes.component.html e siga os passos abaixo:

1. Adicione o método abaixo como atributo do form:

(ngSubmit)="cadastro()"

2. Adicione os formControlNames aos inputs do formulário:

formControlName="nome"
formControlName="cpf"
formControlName="email"
formControlName="telefone"
formControlName="endereco"

3. Adicione agora um formGroup chamado formCadastro como atributo do form:

[formGroup]="formCadastro"

Nosso form atualizado ficou assim:

<div class="container">

<div class="row box-cadastro">

<div class="col-12">

<h3 class="text-center">Você está a um passo de criar sua conta Training Banking</h3>

<form class="mt-5" (ngSubmit)='cadastro()' [formGroup]='formCadastro'>

<div class="form-group">

<input type="text" class="form-control cadastro" placeholder="Nome" formControlName='nome'>

</div>

<div class="form-group">

<input type="number" class="form-control cadastro" placeholder="CPF" formControlName='cpf'>

</div>

<div class="form-group">

<input type="email" class="form-control cadastro" placeholder="E-mail" formControlName='email'>

</div>

<div class="form-group">

<input type="tel" class="form-control cadastro" placeholder="Telefone" formControlName='telefone'>

</div>

<div class="form-group">

<input type="text" class="form-control cadastro" placeholder="Endereço" formControlName='endereco'>

</div>

<button type="submit" class="btn btn-cadastro btn-lg">Cadastrar</button>

</form>

</div>

</div>

</div>

Repare que o Angular dispara um erro:

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:

Atente-se ao log de erro, pense para resolver o problema. Abaixo, vamos resolver esse problema.

Pegando os dados digitados no formulário

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’:

import { ReactiveFormsModule } from ‘@angular/forms’;

2. Adicione o ReactiveFormsModule em seu array de importações “@NgModule”:

@NgModule({
imports: [
// other imports ...
  ReactiveFormsModule
], })

3. Agora abra o arquivo cadastro-clientes.component.ts. Nele, vamos importar os seguintes itens:

import { FormBuilder } from '@angular/forms';

Injete o serviço formBuilder no construtor do component:

constructor(private fb: FormBuilder) { }

Veja como está nossa aplicação até o momento:

Repare que ainda estamos com erro. Já vamos resolvê-lo.

Gerando controles do formulário

Agora que já adicionamos os módulos necessários para trabalhar com formulários reativos, importamos as classes e injetamos os serviços necessários, é hora de criarmos os controles do formulário.

Para refrescar nossa memória, temos os seguintes campos em nosso formulário:

• Nome
• CPF
• Email
• Telefone
• Endereço

Precisamos criar um controle que englobe todos esses campos do nosso formulário. Para isso, copie e cole em seu editor o trecho de código abaixo.

Declare uma variável chamada formCadastro, que é o mesmo nome passado no [formGroup] em nosso HTML. Lembra?

formCadastro;

Dentro do ngOnInit, crie o controle de formulário:

formCadastro = this.fb.group({
  nome: [''],
  cpf: [],
  email: [],
  telefone: [],
  endereco: []
});

É recomendável que você pare o servidor e suba novamente. Vamos ver como nossa aplicação está neste exato momento?

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:

[formGroup]="form"

2. Importe o FormBuilder do pacote ‘@angular/forms’:

import { FormBuilder } from '@angular/forms';

3. Injete no constructor:

constructor(private fb: FormBuilder) { }

4. Crie o controle do formulário.

this.formLogin = this.fb.group({
  cpf: ['']
});

Agora nossa aplicação voltou a funcionar:

Visualizando os dados digitados no formulário

Agora que já configuramos e criamos um controle para os formulários da nossa aplicação, é muito fácil visualizar os dados digitados nos campos. Siga os passos abaixo:

1. No arquivo cadastro-clientes.components.ts, crie o método abaixo:

cadastro(){
 console.log(this.formCadastro.controls);
}

Testando o cadastro:

Repare que agora temos os dados do usuário salvos em nosso objeto formCadastro.

Salvando login no LocalStorage

Agora que temos os dados salvos em nosso objeto, vamos convertê-lo e salvar no LocalStorage.

Siga os passos:

1. Em nosso método cadastro, adicione as seguintes instruções:

this.conversao = JSON.stringify(this.valoresForm);
localStorage.setItem('cadastro', this.conversao);

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.

Vamos testar a aplicação:

Criando a área logada da aplicação

Vamos precisar de um component chamado home-logada. Esse component será restrito e só poderá ser acessado assim que o usuário efetuar o login no sistema.

Para isso, vamos gerar o component como o comando:

ng g c home-logada

Criando autenticação

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.

Grande abraço!