Angular 19: aprenda a criar e validar reactive forms

Formulários reativos com Freelando - Apresentação

Introdução ao Curso de Angular

Olá! Boas-vindas a mais um curso de Angular na Alura. Meu nome é Charleston Campos.

Audiodescrição: Charleston é um homem negro com barba relativamente grande e escura, e cabelo escuro.

Objetivo do Curso

Neste curso, vamos explorar como trabalhar de forma eficaz com o Reactive Form (Formulário Reativo) no Angular. O projeto que utilizaremos como base é chamado Freelando. Neste projeto, tanto usuários quanto clientes podem se cadastrar para se disponibilizarem em uma plataforma de freelance. Aqueles que desejam ser contratados fazem seu cadastro, assim como aqueles que estão contratando.

Foco no Reactive Form

Dentro dessa plataforma, nosso foco será o Reactive Form, um tema amplamente requisitado no mercado. Essa funcionalidade é um diferencial significativo na construção de aplicativos com o Angular. Por isso, convidamos todos a participar deste curso para aprofundar o conhecimento sobre o Reactive Form. A proposta é começar com conceitos básicos e avançar até as implementações mais complexas e variadas que existem no mundo do Angular.

Validações e Implementações

No projeto já implementado, vamos aprender a validar diversos campos diferentes, componentes criados diretamente dentro da aplicação, validações de inputs e também validadores que podem estar no back-end e validadores customizados dentro da própria aplicação do Angular. De diversas formas, vamos tratar e verificar se o formulário está válido ou não, se as informações inseridas pelo usuário são válidas para determinados campos e se as seleções foram feitas corretamente.

Pré-requisitos para o Curso

Para aplicar tudo o que será ensinado da melhor forma possível, é interessante que já tenhamos uma base sólida de HTML, CSS e JavaScript. Também é importante conhecer um pouco de Angular para se familiarizar com algumas sintaxes e entender como o Angular funciona, o que é um componente, o que é um service, como as rotas funcionam dentro do Angular e como essas interações ocorrem dentro de um aplicativo.

Conclusão e Expectativas

Estamos ansiosos para nos encontrar na aula, pois o curso está incrível e será um grande diferencial no mercado de trabalho dominar o formulário reativo do Angular. Até lá!

Nota sobre o Vídeo de Introdução

Como este vídeo é uma introdução ao curso, não há snippets de código a serem integrados neste momento. O foco está em apresentar o tema, o projeto e os pré-requisitos necessários para acompanhar o curso com sucesso.

Formulários reativos com Freelando - Apresentando o Freelando

Introdução à Estrutura e Arquitetura do Projeto

Antes de iniciarmos a codificação do nosso projeto chamado Freelando, é fundamental conhecermos a estrutura e a arquitetura do projeto que vamos desenvolver. Por que essa visão é importante? Porque precisamos entender exatamente onde cada um dos componentes estará localizado. Vamos identificar onde ficarão os componentes que chamamos de Smart Components (componentes inteligentes), que normalmente são as páginas da nossa aplicação, e onde estarão os componentes que chamamos de Dumb Components (componentes simples), que são reutilizáveis dentro da estrutura da aplicação.

Além disso, é essencial nos familiarizarmos com o código que vamos desenvolver ao longo deste curso. Por isso, esta aula é crucial para compreendermos a estrutura que será criada e utilizada no projeto.

Explorando a Estrutura do Projeto no VS Code

Para isso, abra o seu VS Code e acompanhe a estrutura do projeto. Já estamos com o VS Code aberto, no projeto Freelando, que será utilizado neste curso. No canto esquerdo, onde está a árvore de diretórios, podemos visualizar claramente cada uma das pastas importantes dentro de uma aplicação Angular.

Para recapitular, caso ainda não esteja familiarizado, uma aplicação Angular é gerada exatamente como está aqui. Já estamos com o app.component aberto, que é o HTML principal da aplicação. Basicamente, onde vamos trabalhar mais será dentro da estrutura da pasta app. Nela, teremos nossos componentes simples e os componentes inteligentes, que normalmente são as páginas da aplicação.

Componentes e Serviços no Projeto

Dentro da pasta "Shared", encontramos todos os componentes já criados previamente, para que não precisemos criar componentes durante este curso, uma vez que nosso foco é trabalhar com o Reactive Form (Formulário Reativo). A criação de componentes, configurações, CSS e layout da página não serão abordados diretamente neste curso. Por isso, recomendamos que participem dos outros cursos da Alura, que têm foco nesses temas, para obter uma base maior de conhecimento. Isso também permitirá que utilizem o projeto Freelando para realizar atividades além do curso que estamos fazendo juntos.

Além dos componentes, encontraremos os services (serviços) que criaremos ao longo do curso. Para maior clareza, dentro da página que mencionamos como Smart Components, encontraremos cada uma das páginas que desenvolveremos ao longo do curso. Basicamente, trabalharemos com essas duas pastas que estão expostas para vocês.

Planejamento das Telas no Figma

Para termos uma visão ainda mais clara do que faremos, vamos abrir nosso Figma para entender cada uma das etapas que desenvolveremos ao longo do curso. Trabalharemos com três telas. Inicialmente, começaremos com a tela "Criando o Seu Cadastro", que incluirá o radio button (botão de opção) e a seleção do nível de experiência. Em seguida, faremos o cadastro do nome, dados da cidade, e-mail, etc. Depois, realizaremos o upload (carregamento) da foto e o resumo das qualificações da pessoa que está se cadastrando no site, além das habilidades que ela possui. Também incluiremos o link do portfólio e do LinkedIn, para que o recrutador possa entender o perfil da pessoa.

Estrutura HTML da Página de Cadastro

Agora, vamos dar uma olhada em como a estrutura HTML da página de cadastro será organizada. Abaixo está um exemplo de como podemos estruturar a página de cadastro utilizando componentes Angular:

<div class="cadastro-page">
    <app-header></app-header>
    <main class="cadastro-page__main">
        <app-cadastro-form></app-cadastro-form>
    </main>
    <app-footer></app-footer>
</div>

Neste trecho de código, podemos ver que a página de cadastro é composta por um cabeçalho (<app-header>), um formulário de cadastro (<app-cadastro-form>) e um rodapé (<app-footer>). Essa estrutura modular facilita a manutenção e a reutilização dos componentes em diferentes partes da aplicação.

Conclusão e Próximos Passos

É exatamente isso que trabalharemos ao longo do curso, por isso é importante acompanhar bem as aulas para entender cada um dos processos que serão realizados. Esperamos vocês no próximo vídeo, onde começaremos a construir nosso primeiro componente. Até já!

Formulários reativos com Freelando - Estrutura do formulário - Etapa 1

Introdução ao Desenvolvimento da Tela

Já compreendemos a arquitetura e o projeto do Freelando, sabemos onde está cada um dos componentes. Agora, vamos codificar nossa primeira tela para garantir que o Reactive Form funcione adequadamente. Para recapitular, vamos abrir o Figma e entender a tela que será codificada. A tela que vamos desenvolver é aquela que possui um campo para a área de atuação e outro para o nível de experiência. Esses dois componentes já existem previamente no projeto Freelando e vamos adicioná-los na tela para focarmos no Reactive Form e não na criação dos componentes em si.

Configuração Inicial no VS Code

Vamos ao VS Code e começar nosso trabalho. Vamos abrir o CadastroFormComponent e iniciar a codificação adicionando a interface OnInit para chamar a função ngOnInit, pois dentro dela teremos o FormBuilder, responsável pela construção do formulário no Angular.

Primeiro, vamos implementar a interface OnInit na nossa classe:

export class CadastroFormComponent implements OnInit {

Agora, vamos implementar o método ngOnInit que será responsável por inicializar o nosso formulário:

ngOnInit(): void {
    this.cadastroForm = new FormGroup({});
}

Injeção do FormBuilder

Com a função implementada, digitamos this.cadastroForm, que é o nome do nosso FormGroup dentro do componente, indicando que ele receberá this.fb.group(), onde abrimos parênteses e chaves. Note que o fb não existe na classe, então precisamos injetá-lo no construtor para utilizá-lo no Angular.

Vamos adicionar o FormBuilder no construtor:

constructor(private fb: FormBuilder) {}

Agora, podemos atualizar o ngOnInit para usar o FormBuilder:

ngOnInit(): void {
    this.cadastroForm = this.fb.group({

    });
}

Adicionando Campos ao Formulário

Na linha 52, adicionamos os campos ao formulário. O primeiro campo é "área de atuação", que é o RadioButton visto no Figma. Corrigimos o autocomplete e digitamos apenas "área de atuação". No final, colocamos dois pontos e abrimos colchetes. Definimos as propriedades do campo no formulário, começando com uma string vazia como valor inicial. Poderia ser nulo ou outro valor. Inicialmente, trabalhamos com o item do formulário vazio. Após a vírgula, colocamos os validadores, indicando que o RadioButton é obrigatório para seguir com o cadastro no Freelando. Digitamos Validators.required e importamos corretamente.

ngOnInit(): void {
    this.cadastroForm = this.fb.group({
        areasAtuacao: ['', Validators.required],
    });
}

Depois, adicionamos "níveis de experiência" como próximo campo, com dois pontos no final, abrimos colchetes, colocamos uma string vazia e Validators.required. Assim, fechamos a criação do formulário no componente.

ngOnInit(): void {
    this.cadastroForm = this.fb.group({
        areasAtuacao: ['', Validators.required],
        niveisExperiencia: ['', Validators.required]
    });
}

Construção do HTML

Agora, vamos ao HTML para a construção necessária para o funcionamento. Abrimos o CadastroFormComponent.html. Na linha 6, digitamos o necessário para o cadastro do usuário na tela. Corrigimos o autocomplete e digitamos o que precisamos.

Vamos iniciar digitando a tag form, que é uma tag conhecida do HTML, e adicionar algumas propriedades do Angular. Uma delas é o formGroup, onde colocaremos o nome do formulário que criamos no componente, que é cadastroForm. Em seguida, adicionaremos o ngSubmit, que é basicamente um output do Angular informando qual função será chamada dentro do componente quando o formulário for submetido. O nome da função será onProximo, que será criada posteriormente. Após isso, podemos fechar a tag form e continuar o desenvolvimento.

<form [formGroup]="cadastroForm" (ngSubmit)="onProximo()">
</form>

Adicionando Componentes ao Formulário

Com a tag form criada, vamos adicionar os componentes dentro dela. Para tornar a aula mais clara e intuitiva, utilizaremos alguns itens previamente preparados, que não precisam de tanta atenção no contexto atual da aula. Vamos criar uma div para definir o contexto da seção desejada na tela. Fecharemos a div na linha 9 e, em seguida, adicionaremos um h3, que será o título da tela: "Qual a área de atuação?".

Agora, adicionaremos o radioButton. Neste caso, teremos mais uma div e, dentro dela, colocaremos o appRadioOption, que é o nome da tag do nosso componente. Após inserir o componente, garantimos que ele está importado no arquivo .ts. O autocomplete do VSCode é bastante eficiente, pois, ao digitarmos radioOption no HTML, ele já realiza a importação do componente automaticamente.

<div class="cadastro-form__radio-group">
    <app-radio-option
        *ngFor="let area of areasAtuacao"
        [id]="area.id"
        [name]="'areaAtuacao'"
        [value]="area.value"
        [label]="area.label"
        [checked]="cadastroForm.get('areaAtuacao')?.value === area.value"
        (selectionChange)="onAreaChange($event)">
    </app-radio-option>
</div>

Organização dos Imports e Função de Seleção

Para organizar melhor o que queremos utilizar dentro do componente, removeremos os imports diretamente do decorator e os colocaremos em uma constante, assim como fizemos com os módulos.

const COMPONENTS = [
    ButtonComponent,
    RadioOptionComponent
]

Nos imports, também incluímos essa constante criada anteriormente.

imports: [
    ...MODULES,
    ...COMPONENTS
],

Para garantir o funcionamento correto, vamos ao componente e digitamos a função onAreaChange, que será acionada ao selecionar uma área diferente. A função terá a seguinte implementação:

onAreaChange(area: string) {
    this.cadastroForm.get('areasAtuacao')?.setValue(area);
}

Isso assegura que o campo selecionado no formulário seja atualizado com o valor passado como parâmetro.

Conclusão do Componente RadioButton

Com a implementação do radioButton concluída, passamos para o próximo componente, que é o nível de experiência. Precisamos adicionar o componente completo para que tudo funcione corretamente.

Sobre o curso Angular 19: aprenda a criar e validar reactive forms

O curso Angular 19: aprenda a criar e validar reactive forms possui 249 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Formulários reativos com Freelando
• Validações e componentes reativos
• Formulários complexos
• Validação assíncrona
• Formulários dinâmicos e escalabilidade