O que é Reactive Forms

Conteúdo

O que é Reactive Forms – Angular

Reactive forms é uma abordagem orientada a modelos para construção de formulários no Angular. Desta forma o modelo é criado na classe do componente é mostrado no HTML com um markup especial para ele.

Ele consiste em alguns blocos:

FormGroup;
FormArray;
FormControl.

FormControl

É um campo único de entrada em um formulário Angular. Como assim, vamos ao exemplo:

Nome: <input type="text" name="name" />

Nós podemos usar o FormControl para pegar e setar valores no campo, achar status e adicionar regras de validações. Usando a diretiva de ngModel para isso.

Para criar um FormControl, usamos o seguinte “new FormControl()”.

public name = new FormControl();

Quando temos um novo objeto, podemos acessar os seus valores com um simples ponto, assim:

// Podemos utilizar dentro de alguma funcionalidade
// this.name.value

Podemos também checar os status de validação da seguinte forma:

// Podemos utilizar dentro de alguma funcionalidade
this.name.valid 	//Retorna true se o valor é validado
this.name.dirty 	//Retorna true se o valor é dirty
this.name.touched    //Retorna true se o campo foi selecionado
this.name.error 	//Retorna uma lista de erros

Mas o que faz valid, dirty e touched.

Valid: O valor que vem do campo passa por todas as validações e é marcado como Valid;
Dirty: Quando o usuário muda o valor, ele é marcado como Dirty;
Touched: Quando o usuário interage com o campo ou clicar fora dele.

Nós podemos usar o construtor para passar um valor inicial e validado.

public name = new FormControl('Dener Troquatte', Validators.minLength(3));

No exemplo acima o valor inicial é ‘Dener Troquatte’ e tem que ter no mínimo 3 caracteres.

FormGroup

Pensa como se FormGroup fosse um grupo de FormsControls e cada FormControl é uma propriedade.

Em sua maioria os formulários têm mais de um campo, então temos que deixar uma maneira simples de gerenciar tudo isso.

Pensa no seguinte exemplo:

Cidade: <input type="text" name="cidade" />
Estado: <input type="text" name="estado" />
Rua: <input type="text" name="rua" />

Cada campo é um FormControl separado, imagina se precisássemos validar cada campo individualmente, com o FormGroup resolvemos esse problema, ele envolve cada FormControl e podemos trackear individualmente cada child.

Podemos especificar individualmente cada FormControl no construtor do FormGroup.

public endereco = new FormGroup({
  cidade: new FormControl(''),
  estado: new FormControl(''),
  rua: new FormControl('')
});

Também podemos passar valores iniciais e validações para cada FormControl.

public nomeCompleto = new FormGroup({
  firstName: new FormControl('Dener', Validators.minLength(3)),
  lastName: new FormControl('Troquatte', Validators.minLength(3))
});

Se uma parte do formulário for inválida, o grupo todo é falho na validação.

Podemos usar a propriedade de value para acessar e controlar os valores e assim ele retorna um objeto com todos os valores do grupo.

// Podemos utilizar dentro de alguma funcionalidade
this.nomeCompleto.value;

// Return
nomeCompleto {
       firstName: “Dener”,
       lastName: “Troquatte”
}

Também podemos acessar cada valor individualmente com o “.get()”.

// Podemos utilizar dentro de alguma funcionalidade
this.nomeCompleto.get(‘firstName’)

// Return
“Dener”

E também podemos usar as validações como o “.valid”, “.dirty”, “.touched” e “.error”.

FormArray

É bem parecido com o FormGroup.

O FormGroup contém o controle como uma única propriedade;
O FormArray contém um array de controles como uma propriedade.

É útil para listas, como data de aniversário e endereços como estados e países. E podemos criá-los desta forma.

public contactForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
 
  public estado: new FormArray([
    new FormControl('Sao Paulo'),
    new FormControl('Ceara'),
    new FormControl('Bahia')
  ])
});

Podemos pegar a referência do array com o “get()”.

getEstado(): FormArray {
  return this.contactForm.get('estado') as FormArray;
};

E também como o FormControl e FormGroup, podemos checar os status do array, com o “valid”, “dirty”, “touched” e “error”.

Reactive Form – O que é Reactive forms

Vamos ver um exemplo prático de como usar.

Não podemos esquecer de importar o “ReactiveFormsModule” do “@angular/forms” e importar no array de App Module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent  } from './app.component';
 
import { ReactiveFormsModule } from '@angular/forms';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Vamos criar o nosso form model dentro da nossa classe de componentes.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  public contactForm = new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  });
}

No exemplo acima, importamos o FormGroup e FormControl e criamos um grupo com dois controles.

Agora vamos para view e criar uma estrutura simples que receberá nosso form.

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
 
  <p>
    <label>Primeiro Nome: </label>
    <input type="text" name="firstName" formControlName="firstName">
  </p>
  <p>
    <label>Sobrenome: </label>
    <input type="text" name="lastName" formControlName="lastName">
  </p>
 
  <button type="submit">Enviar</button>
 
</form>

Vamos pontuar algumas coisas sobre o exemplo acima:

Associamos o nosso modelo usando o “formGroup” com o nome e valor do grupo;
Dizemos ao Angular que ao enviar o form com ngSubmit, neste caso chamamos o método “onSubmit()” (que ainda não existe);
Nós linkamos os campos correspondentes com o formControlName .

Agora precisamos criar o “onSubmit()”.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  public contactForm = new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  });
 
  onSubmit() {
    console.log(this.contactForm.value);
  }
}

Para manter tudo simples, ele apenas mostra um console.log.

Validadores – O que é Reactive forms

Como já vimos no FormControl, é fácil adicionar os validadores.

Vamos importar o Validators module no “@angular/forms” e adicionamos o validator que queremos como segundo argumento.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  public contactForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', [Validators.required, Validators.minLength(3)])
  });
 
  onSubmit() {
    console.log(this.contactForm.value);
  }
}

No exemplo acima, os campos requerem no mínimo 3 caracteres para ser aceito.

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
 
  <p>
    <label>Primeiro Nome: </label>
    <input type="text" name="firstName" formControlName="firstName">
  </p>
 
  <p>
    <label>Sobrenome: </label>
    <input type="text" name="lastName" formControlName="lastName">
  </p>
 
  <button type="submit" [disabled]="!contactForm.valid">Enviar</button>
 
</form>

Neste exemplo o botão de enviar é desabilitado até que os requisitos sejam concluídos.

Reset – O que é Reactive forms

Nós podemos usar o método “reset()” para resetar todos os controles do grupo.

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
 
  <p>
    <label>Primeiro Nome: </label>
    <input type="text" name="firstName" formControlName="firstName">
  </p>
 
  <p>
    <label>Sobrenome: </label>
    <input type="text" name="lastName" formControlName="lastName">
  </p>
 
  <button type="submit" [disabled]="!contactForm.valid">Enviar</button>
  <button (click)="onReset()">Resete</button>
 
</form>

Ao clicar no botão resete o método “onReset()” é chamado.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  public contactForm = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', [Validators.required, Validators.minLength(3)])
  });
 
  onSubmit() {
    console.log(this.contactForm.value);
  }

  onReset() {
    this.contactForm.reset();
  }
}

Simplesmente o método “onReset()” invoca o “reset()” do FormGroup e tudo é limpo como esperado. Então agora você sabe o que é Reactive forms Angular.

O que é Reactive Forms – Angular

O que é Reactive Forms – Angular

FormControl

Mas o que faz valid, dirty e touched.

FormGroup

FormArray

Reactive Form – O que é Reactive forms

Validadores – O que é Reactive forms

Reset – O que é Reactive forms

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

O que é Reactive Forms – Angular

O que é Reactive Forms – Angular

FormControl

Mas o que faz valid, dirty e touched.

FormGroup

FormArray

Reactive Form – O que é Reactive forms

Validadores – O que é Reactive forms

Reset – O que é Reactive forms

Difícil de aprender?

Enviar Comentário Cancelar resposta

Tenha uma carreiraFront-end de Sucesso!

Ebook - JORNADA FRONT-END

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Tenha uma carreira
Front-end de Sucesso!