Tutorial IONIC 03

Criando Validação no IONIC com FormBuilder e Validators

E aí pessoal!! Tudo bem com vocês?

A dica de hoje é bastante útil em qualquer aplicação, vou ensinar a vocês como utilizar facilmente o FormBuilder e o Validators para criação e validação de formulários com Ionic.

O exemplo de hoje será utilizado com base em uma tela de login, porém esse conceito serve para telas de cadastros, tela de perfil, edição de dados, etc..

Esta abordagem coloca a maior parte da sua lógica na classe para o seu componente. Isso torna o teste muito mais fácil, e o próprio formulário torna-se muito mais fácil de ler.

Vale deixar claro que aqui não vou ensinar criar uma tela de login, e sim, utilizar o FormBuilder e Validators para criação de validação de forms em geral.

Vamos lá?!

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

ionic start formBuilder blank

Uma vez criado, vamos entrar no diretório do Projeto, executando:

cd formBuilder

2. Importar e utilizar FormBuilder e Validators

Após a criação do projeto, vamos alterar o arquivo src/pages/home/home.ts:

Primeiro nós importaremos o FormBuilder e Validators e criamos algumas variáveis para utilizar posteriormente:

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

[...]

 public loginForm: any;

 messageEmail = ""

 messagePassword = "";

 errorEmail = false;

 errorPassword = false;

Em telas de login, é bem comum termos basicamente 2 campos (e-mail/login e password/senha), então em seguida, no constructor, vamos instanciar o FormBuilder, e criar um grupo do FormBuilder, passando os campos de email e password.

Também passamos o Validators.required (que faz a obrigatoriedade do campo), e o Validators.compose([Validators.minLength(6), Validator.maxLength(20) (que diz que o campo obrigatoriamente tem que ser no mínimo 6 e no máximo 20 caracteres), veja:

  constructor(formBuilder: FormBuilder) {

    this.loginForm = formBuilder.group({

      email: ['', Validators.required],

      password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(20),

      Validators.required])],

    });

  }

3. Fazendo a validação dos campos

Já definimos as validações, agora vamos utilizá-las no formulário:

  login() {

    let { email, password } = this.loginForm.controls;

    if (!this.loginForm.valid) {

      if (!email.valid) {

        this.errorEmail = true;

        this.messageEmail = "Ops! Email inválido";

      } else {

        this.messageEmail = "";

      }

      if (!password.valid) {

        this.errorPassword = true;

        this.messagePassword ="A senha precisa ter de 6 a 20 caracteres"

      } else {

        this.messagePassword = "";

      }

    }

    else {

      alert("Login Realizado");

    }

  }

No nosso método login(), criamos constantes email e password que são controles do loginForm.

E fizemos algumas verificações, caso os campos não estejam válidos (!email.valid) e (!password.valid) nós criamos algumas mensagens para alertar o usuário, caso contrário, ou seja, são válidos, o login será realizado.

Nosso arquivo src/pages/home/home.ts deverá estar assim:

import { Component } from '@angular/core';

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

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  public loginForm: any;

  messageEmail = ""

  messagePassword = "";

  errorEmail = false;

  errorPassword = false;

  constructor(formBuilder: FormBuilder) {

    this.loginForm = formBuilder.group({

      email: ['', Validators.required],

      password: ['', Validators.compose([Validators.minLength(6), Validators.maxLength(20),

      Validators.required])],

    });

  }

  login() {

    let { email, password } = this.loginForm.controls;

    if (!this.loginForm.valid) {

      if (!email.valid) {

        this.errorEmail = true;

        this.messageEmail = "Ops! Email inválido";

      } else {

        this.messageEmail = "";

      }

      if (!password.valid) {

        this.errorPassword = true;

        this.messagePassword ="A senha precisa ter de 6 a 20 caracteres"

      } else {

        this.messagePassword = "";

      }

    }

    else {

      alert("Login Realizado");

    }

  }

}

4. Criando rapidamente o HTML

Vamos modificar rapidamente o arquivo src/pages/home/home.html:

<ion-content padding class="primary-font">

  <form padding [formGroup]="loginForm" (submit)="login()" novalidate>

    <ion-item>

      <ion-input [(ngModel)]="email"

                 formControlName="email"

                 type="text"

                 placeholder="E-mail"

                 clearInput clearOnEdit="false">

      </ion-input>

    </ion-item>

    <h6 *ngIf="errorEmail" class="error"> {{messageEmail}}</h6>

    <ion-item>

      <ion-input [(ngModel)]="password"

                 formControlName="password"

                 type="password"

                 placeholder="Senha"

                 clearInput clearOnEdit="false">

      </ion-input>

    </ion-item>

    <h6 *ngIf="errorPassword" class="error"> {{messagePassword}}</h6>

    <button ion-button block outline color="secondary" class="login-button">Login</button>

  </form>

</ion-content>

O que temos de importante aqui são a tag <form>….</form> utilizada para identificar que é de fato um form e devemos passar um formGroup e nos inputs devemos passar também um formControlName para cada campo.

Claro que devemos ficar atentos com as nomenclaturas, que devem ser exatamente a que definimos no arquivo src/pages/home/home.ts:

formGroup]="loginForm"

formControlName="email"

formControlName="password"

Para deixar o app com uma melhor experiência para o usuário, vamos alterar o arquivo src/pages/home/scss.ts, assim, quando houver dados inválidos, a letra com o alerta ficará vermelha e no tamanho reduzido para 12 pixels:

page-home {

    .error{

      color: #ff0000;

      font-size: 12px;

    }

}

5. Executando o projeto

Feito isso, já temos uma transição bacana entre slides, para vermos o resultado, vamos digitar:

ionic serve -l

ionic cordova run android

ionic cordova run ios

Anterior CordovaBasic Android PhpMysql

Beleza pessoal espero ter ajudado!!..

Qualquer dúvida podem ficar a vontade.

Validação Ionic 3