Criando uma aplicação (Internet Banking) com Angular 6 — na prática e sem complicações parte 4

Danilo Agostinho
Oct 29, 2018 · 6 min read

Onde paramos

Cadastro de usuários

Obtendo os dados digitados no formulário

Foca no trabalho!

Criando controles para nosso formulário

(ngSubmit)="cadastro()"
formControlName="nome"
formControlName="cpf"
formControlName="email"
formControlName="telefone"
formControlName="endereco"
[formGroup]="formCadastro"
<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>

Pegando os dados digitados no formulário

import { ReactiveFormsModule } from ‘@angular/forms’;
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
], })
import { FormBuilder } from '@angular/forms';
constructor(private fb: FormBuilder) { }

Gerando controles do formulário

formCadastro;
formCadastro = this.fb.group({
nome: [''],
cpf: [],
email: [],
telefone: [],
endereco: []
});
[formGroup]="form"
import { FormBuilder } from '@angular/forms';
constructor(private fb: FormBuilder) { }
this.formLogin = this.fb.group({
cpf: ['']
});

Visualizando os dados digitados no formulário

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

Salvando login no LocalStorage

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

Criando a área logada da aplicação

ng g c home-logada

Criando autenticação

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Thanks to Lauren Ferreira.

Danilo Agostinho

Written by

Front-end developer. Autor @Imasters. Mentor Traning Center. @danilodev_silva

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.