Criando form array em angular

Dominando Formulários Dinâmicos: Criando Form Array em Angular

No desenvolvimento de aplicações web modernas com Angular, frequentemente nos deparamos com a necessidade de construir formulários dinâmicos. Imagine um cenário onde o usuário precisa adicionar múltiplas opções, como uma lista de tags, e-mails, ou itens de um pedido. É aqui que o FormArray, uma ferramenta poderosa das Reactive Forms do Angular, brilha. Este guia prático irá desvendar o processo de Criando form array em angular, mostrando como implementar e gerenciar coleções de controles de formulário de forma eficiente.

O que é um FormArray e Por Que Usá-lo?

Um FormArray é, essencialmente, uma coleção de AbstractControl, que pode ser um FormControl, um FormGroup ou até mesmo outro FormArray. Sua principal vantagem é permitir que você trate um grupo de controles de formulário como um array, facilitando a adição, remoção e validação de múltiplos campos de forma dinâmica.

Você deve considerar Criando form array em angular quando:

• A quantidade de campos em seu formulário não é fixa (ex: adicionar múltiplos telefones).
• Você precisa replicar um grupo de campos (ex: vários endereços com rua, cidade, CEP).
• Você deseja iterar sobre um conjunto de controles para validação ou exibição.

Preparando o Terreno: Configurando Reactive Forms

Antes de mergulharmos na criação do FormArray, certifique-se de que seu projeto Angular está configurado para usar Reactive Forms. Isso envolve importar o ReactiveFormsModule em seu módulo principal (geralmente app.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // <-- Importe este módulo

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // <-- Adicione ao array de imports
  ],
  providers: [],
  bootstrap:
})
export class AppModule { }

Criando Seu Primeiro Form Array

Para ilustrar a Criando form array em angular, vamos construir um formulário simples de gerenciamento de tarefas para um projeto. Nosso formulário terá um nome de projeto e uma lista dinâmica de tarefas, onde cada tarefa tem um nome e um status de conclusão.

Definindo o Formulário no Componente (.ts)

No seu componente, usaremos o FormBuilder para criar o FormGroup principal e, dentro dele, o FormArray para as tarefas. O FormBuilder simplifica a sintaxe para a criação de formulários reativos.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-project-tasks',
  templateUrl: './project-tasks.component.html',
  styleUrls: ['./project-tasks.component.css']
})
export class ProjectTasksComponent implements OnInit {
  projectForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.projectForm = this.fb.group({
      projectName: ['', Validators.required],
      tasks: this.fb.array([ // <-- Aqui inicializamos nosso FormArray
        this.createTaskFormGroup() // Adiciona uma tarefa inicial
      ])
    });
  }

  // Método auxiliar para criar um FormGroup para uma única tarefa
  createTaskFormGroup(): FormGroup {
    return this.fb.group({
      taskName: ['', Validators.required],
      isCompleted:
    });
  }

  // Getter para facilitar o acesso ao FormArray no template
  get tasks(): FormArray {
    return this.projectForm.get('tasks') as FormArray;
  }

  addTask(): void {
    this.tasks.push(this.createTaskFormGroup());
  }

  removeTask(index: number): void {
    this.tasks.removeAt(index);
  }

  onSubmit(): void {
    if (this.projectForm.valid) {
      console.log('Form Submitted:', this.projectForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

Renderizando o Formulário no Template (.html)

No template HTML, você usará a diretiva formArrayName para vincular seu FormArray e *ngFor para iterar sobre os controles dentro dele. Cada item do FormArray será um FormGroup, então usaremos ="i" para vinculá-los.

<form ="projectForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="projectName">Nome do Projeto:</label>
    <input id="projectName" type="text" formControlName="projectName">
    <div *ngIf="projectForm.get('projectName')?.invalid && projectForm.get('projectName')?.touched" class="error">
      Nome do projeto é obrigatório.
    </div>
  </div>

  <h3>Tarefas</h3>
  <div formArrayName="tasks">
    <div *ngFor="let task of tasks.controls; let i = index" ="i" class="task-item">
      <input type="text" formControlName="taskName" placeholder="Nome da Tarefa">
      <input type="checkbox" formControlName="isCompleted"> Concluída
      <button type="button" (click)="removeTask(i)">Remover</button>
      <div *ngIf="task.get('taskName')?.invalid && task.get('taskName')?.touched" class="error">
        Nome da tarefa é obrigatório.
      </div>
    </div>
  </div>
  <button type="button" (click)="addTask()">Adicionar Tarefa</button>

  <hr>
  <p>Status do Formulário: {{ projectForm.valid ? 'Válido' : 'Inválido' }}</p>
  <button type="submit" ="projectForm.invalid">Enviar</button>
</form>

<!-- Exibição de dados para debug -->
<pre>{{ projectForm.value | json }}</pre>

Adicionando e Removendo Itens Dinamicamente

A beleza de Criando form array em angular reside na sua capacidade de manipulação dinâmica. As funções addTask() e removeTask() no componente TypeScript (já incluídas no exemplo acima) demonstram como fazer isso:

• addTask(): Adiciona um novo FormGroup (representando uma nova tarefa) ao FormArray usando o método push().
• removeTask(index): Remove um FormGroup específico do FormArray usando o método removeAt(index).

Essas operações atualizam a estrutura do formulário reativo e, graças ao binding de dados do Angular, a interface do usuário se reflete automaticamente.

Validação em FormArrays

A validação funciona de forma granular em FormArrays. Você pode aplicar validadores a FormControls individuais dentro de cada item do array, assim como faria em qualquer outro FormGroup. No nosso exemplo, aplicamos Validators.required ao projectName e ao taskName.

O status de validação do FormArray (e consequentemente do FormGroup pai) refletirá o status de todos os seus controles internos. Se uma única tarefa tiver um campo inválido, o FormArray e o projectForm serão considerados inválidos.

Conclusão

Compreender e aplicar o FormArray é um passo crucial para construir formulários complexos e interativos em Angular. Ele oferece uma solução robusta e limpa para gerenciar coleções de controles de formulário, melhorando a experiência do usuário e a manutenibilidade do código. Agora que você dominou a arte de Criando form array em angular, sinta-se à vontade para explorar suas capacidades e integrar essa poderosa ferramenta em seus próximos projetos, tornando seus formulários mais dinâmicos e flexíveis.