---

Agora vamos adicionar um formulário de signin de email e senha

O Id do provider de autenticação de email e senha dentro do authentication é password, porém como fica semanticamente pobre para entendimento, eu costumo descrever o componente que crio para o formulário como auth/auth-email-password
Essa informação vem de firebase.auth.EmailAuthProvider.PROVIDER_ID, mas não se assuste, iremos ver isso mais tarde. =D

Então vamos codar, vamos adicionar o componente

ng g c auth/auth-email-password
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.scss (0 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.html (34 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.spec.ts (707 bytes)
CREATE projects/principal/src/app/auth/auth-email-password/auth-email-password.component.ts (320 bytes)
UPDATE projects/principal/src/app/auth/auth.module.ts (379 bytes)

Se tudo ocorreu como previsto o componente deve ter sido criado dentro da pasta auth e declarado dentro do modulo auth como na imagem abaixo.

Agora dentro de auth.component.html retire o h1 que criamos e vamos colocar o o auth-email-password.component como descrito abaixo

<div class="auth-body">
  <div class="auth-content">
    <div>
      <app-auth-email-password></app-auth-email-password>
    </div>
  </div>
</div>

rodando ng serve e na rota /auth vc deve verificar que agora temos o auth-email-password aparecendo no nosso retângulo =D

Ok, tudo works ainda, então vamos criar nosso formulário e com os campinhos e botões =D
Voltamos ao template html do componente auth-email-password e delete essas linhas

<p>auth-email-password works!</p>

Agora vamos colocar alguns HTMLs e CSSs

<form class="mt-2">
  <div class="mt-2">
    <div class="form-group mb-2">
      <label for="email">Email</label>
      <input type="email" class="form-control rounded-pill" placeholder="Email">
    </div>
    <div class="form-group mb-2">
      <label for="senha">Senha</label>
      <input type="password" class="form-control rounded-pill" placeholder="Senha">
    </div>
  </div>
  <div class="text-center mb-1">
    <button mat-stroked-button class="rounded-pill btn-block mt-4">Logar</button>
  </div>
</form>

Se vc reparar estou apenas usando os estilos que o bootstrap já traz pronto, como por exemplo o mt-2, que se refere a margin-top: ($spacer * .25) !important; além de classes para formulários como o form-group, o rounded-pill para estilos de botões, etc, vc pode obter mais informações na documentação do bootstrap 4 https://getbootstrap.com.br/docs/4.1/getting-started/introduction/

Se tudo saiu certinho, esse deve ser o resultado

Agora vamos declarar o form para o Angular, e assim conseguirmos recuperá-lo dentro da classe AuthEmailPasswordComponent que é o component em si
Mas antes disso, iremos precisar do FormsModule que é o carinha que tem as definições e ferramentas para trabalhar com formulários no Angular, então vamos adicioná-lo ao módulo que é responsável pelo nossos components de auth, o auth.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AuthComponent } from './auth.component';
import { AuthEmailPasswordComponent } from './auth-email-password/auth-email-password.component';


@NgModule({
  declarations: [AuthComponent, AuthEmailPasswordComponent],
  imports: [
    CommonModule,
    FormsModule
  ]
})
export class AuthModule { }

Dica da tia Evelyn, sempre coloquem o que for de Angular no início do arquivo, é de acordo com styleguide, até pq se a Loiane olhar para o código de vcs e não estiver no lugar correto….

Ok, FormsModule ok, voltamos ao html template, vamos declarar o form, ele é do tipo ngForm, e criar uma função de submit dentro do component.
Para não ficar mostrando erro, vou primeiro criar a função submit. aoSubmeterFormulario(f: NgForm), sim crio tudo em pt-BR =D

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-auth-email-password',
  templateUrl: './auth-email-password.component.html',
  styleUrls: ['./auth-email-password.component.scss']
})
export class AuthEmailPasswordComponent implements OnInit {
  constructor() {}

  aoSubmeterFormulario(f: NgForm) {
    console.log(f);
  }

  ngOnInit() {}
}

Agora dentro do template html vamos adicionar o submit e declarar o form
f="ngForm" (submit)="aoSubmeterFormulario(f)"

<form #f="ngForm" (submit)="aoSubmeterFormulario(f)" class="mt-2" >
  <div class="mt-2">
    <div class="form-group mb-2">
      <label for="email">Email</label>
      <input type="email" class="form-control rounded-pill" placeholder="Email">
    </div>
    <div class="form-group mb-2">
      <label for="senha">Senha</label>
      <input type="password" class="form-control rounded-pill" placeholder="Senha">
    </div>
  </div>
  <div class="text-center mb-1">
    <button mat-stroked-button class="rounded-pill btn-block mt-4">Logar</button>
  </div>
</form>

Se ficou tudo ok, rode a aplicação abra o console do navegador e clique no botão, o resultado deve aparecer ao lado como na imagem abaixo.

Porém nenhum controle é mostrado, precisamos ajustar isso. =D
Vamos começar com o controle email, bem, primeiro ele precisa ter um nome, name=”email”, precisamos declarar ele como um ngModel #email=”ngModel” e exportá-lo como um ngModel, para isso apenas iremos colocar ngModel como atributo da tag input, um pouco confuso né eu sei, mas não se preocupe, logo vc se acostuma, tem coisas piores, confie em mim rsrs, iremos fazer o mesmo para o password, apenas trocando email por senha, olhe abaixo como fica

<form #f="ngForm" (submit)="aoSubmeterFormulario(f)" class="mt-2">
  <div class="mt-2">
    <div class="form-group mb-2">
      <label for="email">Email</label>
      <input type="email" #email="ngModel" ngModel name="email" class="form-control rounded-pill" placeholder="Email">
    </div>
    <div class="form-group mb-2">
      <label for="senha">Senha</label>
      <input type="password" #senha="ngModel" ngModel name="senha" class="form-control rounded-pill"

        placeholder="Senha">
    </div>
  </div>
  <div class="text-center mb-1">
    <button mat-stroked-button class="rounded-pill btn-block mt-4">Logar</button>
  </div>
</form>

Agora o resultado fica um pouco diferente, em controls, já temos duas pessoinhas que não tínhamos antes, email e senha.

Se vc inserir um valor em cada um dos campos, também poderá recuperar facilmente.
Veja abaixo

Ou dentro da função aoSubmeterFormulario recuperar direto os valores dos campos

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-auth-email-password',
  templateUrl: './auth-email-password.component.html',
  styleUrls: ['./auth-email-password.component.scss']
})
export class AuthEmailPasswordComponent implements OnInit {
  constructor() {}

  aoSubmeterFormulario(f: NgForm) {
    console.log(f.controls.email.value);
    console.log(f.controls.senha.value);
  }

  ngOnInit() {}
}

Resultado:

Bom por enquanto é isso, no próximo vamos validar esse formulário, té!

1