Formulários reativos no Angular

Nesta lição, você aprenderá sobre formulários reativos, que tratam cenários complexos de formulários em aplicações Angular.

O que são formulários reativos?

Os formulários reativos usam uma abordagem programática para criar e gerenciar formulários, oferecendo maior flexibilidade e recursos de validação.

Importando o ReactiveFormsModule

Para usar formulários reativos, importe o ReactiveFormsModule no seu módulo:

import { ReactiveFormsModule } from '@angular/forms';

Criando um FormGroup

Defina um grupo de formulário na classe do seu componente:

this.myForm = new FormGroup({
  name: new FormControl('')
});

Vinculando o formulário ao modelo

Use a diretiva formGroup no modelo para conectar o seu grupo de formulário:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

Validação do formulário

Os validadores podem ser facilmente adicionados aos formulários reativos para garantir a correção dos dados de entrada:

name: new FormControl('', Validators.required)

Tratando o envio do formulário

Trate o envio de formulários inscrevendo-se nos eventos de envio na classe do seu componente:

onSubmit() {
  console.log(this.myForm.value);
}

Usando o FormBuilder

O serviço FormBuilder simplifica a criação de formulários:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

Resumo

Agora você sabe criar formulários reativos, tratar validações e gerenciar o estado do formulário com eficiência. Muito bem!