Angular Forms - Uma visão Geral e como implementar no seu projeto

Neste artigo teremos uma visão geral dos formulário disponibilizados pela API do Angular e como implementar em um projeto.

Fique por dentro
Na maioria das aplicações WEB, precisamos preencher formulários. Dois exemplos comuns disso são o preenchimento de uma tela de login ou cadastro. Quando estamos trabalhando com o Angular, sua API permite escolher dois tipos de formulários: Template-Driven Forms e Reactive Forms.

A API do Angular é bastante versátil, nos oferecendo, sempre que possível, formas diferentes para realizar tarefas comuns do front-end de aplicações web. Ao trabalhar com formulários com esse framework isso não é diferente. Por isso, neste artigo abordaremos como implementar os dois tipos de formulários disponíveis na API do Angular, que são o Template-Driven Forms e o Reactive Forms. Mostraremos exemplos de como fazer isso em um existente, dando assim ao desenvolvedor a oportunidade de escolher qual delas é a melhor forma, conforme a sua própria necessidade.

Diferenças entre Template-Drivenorms e Reactive Forms

Para criar formulários em nossas aplicações a API do Angular permite escolher entre duas abordagens: Template-Driven Forms ou Reactive Forms.

Abaixo, temos algumas diferenças entre elas:

  • No caso dos Template-Driven a lógica é implementada no template do componente (HTML)
  • Template-Driven Forms funcionam de forma assíncrona
  • Para usar o Template-Driven Forms é necessário importar o módulo FormsModule
  • No caso dos Reactive Forms a lógica fica, geralmente, no componente e as suas validações são feitas programaticamente com TypeScript.
  • Reactive Forms funciona de forma síncrona
  • Para usar Reactive Forms deverá ser importado o módulo ReactiveFormsModule

Como já vimos em outros conteúdos mais fundamentais, módulos são importados no arquivo app.module.ts.

Template-Driven forms" [...] continue lendo...

Artigos relacionados