[IONIC] – Criação e Validação de Forms com FormBuilder e Validators

[IONIC] – Criação e Validação de Forms com FormBuilder e Validators

Olá galera, 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:

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

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:

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:

3. Fazendo a validação dos campos

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

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:

4. Criando rapidamente o HTML

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

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: 

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: 

5. Executando o projeto

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

ou

ou

e deveremos ter algo semelhante à isso:

É isso galera, espero que possam utilizar daqui pra frente nos projetos de vocês essa dica bem útil.

Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!

Previous [IONIC 3] - Selecionar items com ion-Slide e ion-Chip
Next Conheça os segredos do javascript e saia de uma fria!

About author

Junior Abranches
Junior Abranches 10 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 0 Comments

Curso gratuito de Ionic 1 em português

Share this on WhatsAppComo aprender Ionic 1 Sabemos que o desenvolvimento para dispositivos móveis está em alta e podemos ganhar um bom dinheiro trabalhando de casa. Existem diversas formas de

Mobile 0 Comments

Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados

Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,

Validando dados com a classe ArgumentValidator no C#

Share this on WhatsAppConheça a classe ArgumentsValidator E ai pessoal beleza? Hoje gostaria de compartilhar com vocês uma classe que eu criei que nos auxilia na validação de dados. Há

1 Comment

  1. https://www.dataseek.com.br
    novembro 14, 17:07 Reply
    Me interessei pelo seui seu artigo sobre atualizacao de dados. Vou adicionar ao meu favoritos para acompanhar futuramente. Meu site https://www.dataseek.com.br também possui diversas informações sobre o assunto. Somos uma empresas de dados especializada em serviços de cadastro de clientes. Atenciosamente

Leave a Reply