Angular 14: evoluindo a aplicação

Formulários reativos - Apresentação

Olá, tudo bem? Eu sou a Nay e quero te dar as boas-vindas a esse curso sobre Angular. Nele eu vou evoluir a aplicação Memoteca. Por isso, esse curso é para quem já conhece a estrutura e os conceitos fundamentais do Angular e para aprender como dar os próximos passos.

Agora eu vou te mostrar um pouco de tudo o que você vai aprender durante o curso. Você vai aprender como construir um formulário reativo e aplicar validações nele para conseguir mostrar mensagens de erro para a pessoa usuária e também deixar o botão de salvar desabilitado de acordo com o status do formulário.

Você vai conseguir implementar um campo de busca de pensamentos e também paginação dos dados. Além da funcionalidade de favoritar um pensamento.

Para conseguir fazer tudo isso, vamos mergulhar ainda mais fundo no Angular e aprender sobre a classe validators, aprender como utilizar o HttpParams para passar parâmetros na URL, utilizar o serviço Router para recarregar um componente e muito mais.

Essas funcionalidades que serão desenvolvidas ao longo do curso, representam melhorias na segurança, na performance e na experiência da pessoa usuária e são comumente requeridas no dia a dia de trabalho da pessoa desenvolvedora front end.

Quer aprender como fazer tudo isso? Então, vem comigo mergulhar no Angular.

Formulários reativos - Formulário com FormBuilder

Olá, que bom ter você aqui comigo novamente para continuar codando o projeto Memoteca.

Na aplicação, atualmente, quando eu clico no botão de adicionar pensamento e venho para o formulário. Eu posso digitar no conteúdo do pensamento qualquer caractere, letras, números e também caracteres especiais. Não há nenhuma limitação quanto a isso.

Na autoria da mesma forma e também não há uma limitação quanto a quantidade de caracteres. Eu posso salvar aqui esse pensamento.

Além disso, se eu deixar esses campos de conteúdo e autoria em branco, eu, ainda sim, consigo salvar um pensamento e enviar essas informações vazias para a API.

Nós estamos falando aqui de uma aplicação de cadastro de pensamento, mas pense comigo, imagine você estar preenchendo um formulário com o seu nome, e-mail, senha e não ter nenhuma verificação visual na tela para saber se essas informações estão ou não dentro do formato esperado.

Ou se estão erradas de alguma forma. É por isso que é importante implementar formulários que tenham suporte a validações.

No Angular existem dois tipos de formulários. Os formulários orientados a template e os formulários orientados a dados, data driven ou também conhecidos como formulários reativos.

Vamos na aplicação, eu vou abrir o menu lateral esquerdo onde eu tenho todos os arquivos. Então, dentro de src, dentro de app, na pasta componentes, pensamentos. Eu vou abrir o componente criar-pensamentos que é onde está o formulário.

Vou abrir o criar-pensamentos.component.ts e você pode se perguntar, "Como que eu vou transformar esse formulário comum em um formulário reativo?".

O primeiro passo é abrir o arquivo app.module.ts, no lado esquerdo da tela, e importar o módulo de formulários reativos do Angular.

Então, aqui no array de imports, na linha 31, eu vou colocar uma vírgula e vou importar o ReactiveFormsModule, linha 32, pronto, foi feita a importância automática e ele veio do pacote Angular forms.

Eu posso fechar o arquivo app.module.ts. Agora eu vou criar um atributo que vai representar o formulário.

Então, eu vou digitar na linha 20 formulario: que vai ser do tipo FormGroup. Eu preciso importar esse FormGroup, vou clicar na lâmpada e importar o FormGroup também do pacote Angular forms.

Ele está dando um erro na linha 21, então vou acrescentar um sinal de exclamação que é operador de exceção não nulo do type script. Pronto.

O FormGroup faz parte, é um dos principais blocos para construção de formulários que o Angular nos fornece.

O próximo passo vai ser injetar no construtor, na linha 26, outro serviço chamado FormBuilder, então,private formBuilder vai ser do tipo FormBuilder.

O FormBuilder, foi feita a importação automática aqui, o FormBuilder é outra classe de serviço que vai ser responsável pela construção do formulário.

Dentro do método do ngOnInint, na linha 30, eu vou dizer que this.formulario vai receber this.formBuilder.group, vou abrir parênteses, abrir chaves e na linha 31 eu vou colocar os atributos que vão constar neste formulário.

Então, conteudo: e aqui eu vou passar um array com um valor inicial que eu quero que apareça.

Então, eu vou colocar aqui ['Formulário reativo'], vírgula, na próxima linha, a 32, vou colocar autoria:, o array, vou deixar vazio por enquanto e o modelo: vou colocar aqui selecionado o ['modelo1'].

A aplicação já está sendo executada, se eu abrir o terminal, na barra superior. Já está sendo executado, deixa eu subir um pouco para melhorar a visualização.

Está sendo executado o front com o ngserver e o back também com o npmstart.

Só que quando eu venho aqui no formulário, posso até atualizar, não está sendo renderizada essa informações que eu passei ali dentro do FormBuilder.

Porque ainda não foi feita ligação desse formulário que nós criamos na classe ao formulário que está no HTML.

No próximo vídeo eu vou te mostrar como fazer isso.

Formulários reativos - FormGroup e FormControlName

Agora que você já viu como criar um formulário reativo através da classe FormBuilder, vamos continuar refatorando o projeto para conseguir renderizar aquelas informações de formulário aqui na tela.

Voltando a aplicação. Eu posso apagar o atributo pensamento, na linha 14 a linha 19, que eu não quero mais utilizá-lo. Na função criarPensando, está aparecendo um erro, linha 31, que nós estamos fazendo menção ao pensamento.

Então, eu vou apagar a palavra pensamento, na linha 31, e vou digitar formulario.value. Então, agora quando eu criar um novo pensamento, eu quero que sejam cadastradas as informações, os valores constantes no formulário.

E agora, como criar essa vinculação entre o component e o formulário no HTML? Aqui no menu lateral esquerdo eu vou abrir o arquivo criar-pensamento.component.html que vai estar cheio de erros, porque nós apagamos a propriedade pensamento lá da classe.

Então, vamos a refatoração. A primeira coisa que eu vou fazer é apagar todos os locais onde nós estamos fazendo a vinculação bidirecional através do ngmodel. Então, essa vinculação bidirecional não precisa mais ser feita através do ngmodel.

Porque o formulário reativo já vai fazer isso para nós. Então, eu vou apagando o ngmodel da linha 13, da linha 21, da linha 31, da linha 52, da linha 73. Ainda tem mais um? Não.

Ele está aparecendo aqui alguns erros no arquivo por conta das interpolações. Então, eu também vou apagar o conteúdo dessas interpolações.

E nós vamos modificar, linha 61, linha 82, linha 83. Pronto. Apaguei tudo. Então, como eu faço essa ligação?

Aqui dentro da tag <form> na linha 5, eu vou utilizar uma diretiva do Angular chamada formGroup, então, eu vou digitar formGroup e vou fazer um proper binding utilizando os colchetes.

Vou associar essa diretiva à propriedade que nós criamos na classe que é o formulário. Pronto, esse é o primeiro passo. Então, a vinculação do formulário criado na classe ao formulário do HTML foi feita através da diretiva formGroup.

Agora para eu conseguir associar cada campo de input desse aos atributos que eu criei no formulário, na classe, eu preciso de uma propriedade chamada formControlName.

O que eu vou fazer, então, é onde tem name eu vou substituir por formControlName.

Então, eu vou selecionar a palavra name com um clique duplo no mouse. Essa palavra da linha 11, eu vou apertar os botões "Crtl + D" e todas as referências a esse nome, todos os outros name vão ser selecionados para nós fazemos essa modificação toda de uma vez.

Então, apertei os botões "Ctrl + D" várias vezes. Pronto, quando seleciona todos e acaba, ele volta para o primeiro e aqui eu vou digitar formControlName.

Esse formControlName, o valor dele precisa ser exatamente o valor que está aqui dentro do formulário da classe. Então, conteúdo, autoria e modelo.

No input de pensamento eu vou colocar conteudo. No input de autoria, na linha 19, já está certo autoria. No input de modelo está modelo-card, linha 30, então, eu vou apagar o card e deixar só modelo.

Modelo 1, modelo 2 e no modelo 3 também. O que nós precisamos ajustar agora são as interpolações.

Então, dentro da interpolação da primeira prévia na linha 40. Como é que eu vou conseguir pegar esses valores de formulário?

Eu vou digitar formulario.get e entre parênteses eu vou passar ('conteudo') fora dos parentes ponto value. Na linha 40 vai aparecer um erro dizendo que o objeto é provavelmente nulo.

Então, eu vou usar o operador elves fora dos parênteses de conteúdo e vai sumir. Para autoria eu vou a mesma coisa.

Então, eu vou copiar, na linha 40, colar, na linha 41, e mudar de conteudo para autoria. Como nós temos três prévias, eu vou copiar, linha 40 e linha 41, as prévias e vou colar nas linhas 61 e 62 e também nas linhas 82 e 83. Pronto.

Será que tem mais algum erro? Eu acho que sumiram todos. Então, eu vou adicionar um valor para autoria dentro do criar-pensamento.component.ts para nós testarmos.

Então, com essa vinculação, deve aparecer esses valores. Voltando lá na aplicação, nós temos formulário reativo, angular e modelo1. Então, a vinculação foi bem-sucedida.

Na próxima aula você vai aprender como implementar validações em um formulário reativo.

Sobre o curso Angular 14: evoluindo a aplicação

O curso Angular 14: evoluindo a aplicação possui 119 minutos de vídeos, em um total de 49 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
• Validação em forms reativos
• Implementando a paginação
• Implementando campo de busca
• Adicionando Favoritos
• Visualizando os favoritos