[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 17 posts

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

You might also like

Mobile 0 Comments

Implementando Push Notification no Xamarin Forms

Share this on WhatsAppVeja como implementar Push Notification no Xamarin Forms Fala pessoal beleza? Bom espero que sim! Hoje venho trazer um vídeo para vocês de como implementar o recurso

Mobile 4 Comments

Curso completo de Xamarim Forms em português

Share this on WhatsAppConheça tudo sobre o Xamarim Forms Já falei aqui no blog sobre a diferença entre aplicações nativas e híbridas, e que aplicações nativas tem um desempenho muito

Mobile 0 Comments

Curso Ionic em português – Aula 8 – Adicionando tela de aguarde!

Share this on WhatsAppExiba tela de aguarde quando estiver processando algo Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos abrir uma tela de aguarde

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