Curso Angular 2 – Aula 5: Formulário

Curso básico gratuito de Angular 2 | kazale.comO objetivo da aula 5 de Angular 2 é criar o HTML e controles de um formulário de cadastro de um aluno.

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você entenderá como criar um formulário HTML com o Angular 2, assim como adicionar os controles necessários, e utilizar o Bootstrap para estilizar seu visual.

1. Definição

Formulários são essenciais para qualquer aplicação web, pois sempre precisaremos criar telas para obter alguma entrada de dados do usuário.

O Angular 2 possui uma série de controles para nos ajudar com essa tarefa, e nesta aula iremos entender como utilizar o ‘two way binding’ para obter os dados dos campos do formulário, assim como iremos aprender como obter os dados quando um formulário for enviado.

Também utilizaremos o Bootstrap, que é um framework HTML/CSS utilizado para estilizar nosso HTML e exibir uma interface agradável para o usuário final.

2. Configurando o Bootstrap CSS

Vamos começar então configurando o Bootstrap em nosso projeto.

Tal processo inclui adicionar sua dependência ao nosso package.json, e referenciar um arquivo CSS em nosso index.html.

Para adicionar a dependência do bootstrap em nosso projeto execute o comando abaixo na linha de comando:

O código acima irá baixar os arquivos do Bootstrap para o diretório node_modules do nosso projeto, assim como adicionará um entrada no arquivo package.json, conforme abaixo:

Com a dependência configurada, importe o arquivo CSS do Bootstrap no arquivo index.html, conforme exemplo a seguir:

Pronto, com isso o Bootstrap estará devidamente configurado e pronto para uso.

3. Criando o template base

O Bootstrap consiste em uma série de classes CSS que quando adicionadas aos elementos HTML aplicam estilos aos mesmos.

O código abaixo contém o HTML do formulário a ser utilizado na aula, assim como as classes de estilo devidamente adicionadas:

Não é do escopo do curso entrar em detalhes sobre a utilização do Bootstrap, mas para maiores detalhes sobre sua utilização basta acessar a documentação oficial aqui.

Pelo fato do código HTML do formulário ser extenso, dessa vez iremos criar um arquivo externo para armazená-lo, e o referenciaremos na metadata da anotação Component conforme abaixo:

Reparem que dessa vez também criamos um novo componente somente para manipular nosso formulário.

Separar telas em componentes distintos nos ajuda a manter o código sempre organizado, e permite seguir uma boa prática de programação, que é isolar uma funcionalidade por componente.

O código abaixo ensina como adicionar um componente a outro componente, no caso nossa aplicação chamando o componente formulário para ser exibido na tela ao carregar a página:

Devemos importar o arquivo do componente, assim como adicioná-lo na descrição metadata do componente em ‘directives’, para que possa ser reconhecido pelo Angular 2.

Execute a aplicação com o comando abaixo para visualizar o formulário no navegador:

Você deverá ver uma tela conforme a imagem abaixo:

Curso básico gratuito de Angular 2 | kazale.com

Com isso temos nosso formulário exibido na tela, pronto para ser configurado pelo Angular 2.

4. Criando as classes Curso e Aluno

Os dados da tela serão armazenados em duas classes distintas, Curso e Aluno.

A classe Curso será utilizada para armazenar os cursos exibidos na caixa de seleção de cursos, e apresentará a seguinte estrutura:

E a classe Aluno conterá a seguinte estrutura:

É sempre importante criar classes para manter objetos específicos em sua aplicação, assim o código ficará muito mais legível e de fácil manutenção.

Repare também que os arquivos acima foram criados dentro do diretório ‘models’, assim fica mais eficaz  a organização dos arquivos no projeto.

5. Implementando o componente do formulário

Agora que temos o HTML de nosso formulário e nossas classes de representação de objetos, vamos implementar o componente do formulário para lidar com os dados da tela.

O código abaixo adiciona os métodos necessários para o envio e debug dos dados, assim como popula uma array de cursos a ser utilizada na caixa de seleção de cursos:

O objetivo do formulário até aqui será apenas exibir os dados do formulário na tela, que será controlado apenas com a flag sucesso.

6. Adicionando controles ao HTML

Vamos agora adicionar os controles para mapear o formulário com nosso componente.

Para isso utilizaremos o ‘ngModel’ para fazer o ‘two way binding’ entre os componentes.

O código de mapeamento está apresentado abaixo:

No código acima usamos a diretiva *ngIf para alternar a exibição do formulário e da mensagem de envio baseado no valor do atributo de classe ‘sucesso’.

A diretiva *ngFor foi usada para popular os dados da caixa de seleção de cursos, iterando sobre o atributo de mesmo nome em nosso componente.

Usamos ainda a diretiva ngSubmit entre parênteses para indicar o método a ser invocado quando o botão ‘Enviar’ for clicado, e por fim a diretiva ngModel entre parêntese e colchetes para representar o ‘two way binding’, que é responsável por manter em sincronismo o atributo de classe com seu respectivo elemento HTML na tela.

Com isso terminamos a primeira parte de duas sobre formulários. A segunda aula focará na validação da entrada de dados do usuário.

Clique para fazer o download dos arquivos do template base da aula 5.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 5.

6 comentários em “Curso Angular 2 – Aula 5: Formulário

  1. export class Aluno{
    constructor(
    public nome?: string,
    public email?: string,
    public idade?: number,
    public curso?: string){}
    }

    por que esses
    ?????????????????????????????????

    1. Olá José,

      o sinal de interrogação nos atributos significam que o parâmetro no construtor é opcional. Essa é uma característica do Typescript e permite que o objeto Aluno no caso seja criado com diferentes construtores, como por exemplo:

      new Aluno();
      new Aluno(‘José’);
      new Aluno(‘Fulano’, ‘fulano@email.com’);

      E assim por diante…

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

4 × um =