Gerenciar dados estruturados e dinâmicos é um desafio comum em aplicativos web modernos. O FormArray do Angular é uma ferramenta poderosa para essa finalidade.

O FormArray facilita a criação e gestão de linhas e colunas dinâmicas de campos de entrada, permitindo interfaces semelhantes a planilhas.

Neste guia, você aprenderá a:

• Carregar e analisar dados CSV em um formato estruturado
• Gerar controles de formulário dinamicamente usando o FormArray do Angular
• Adicionar regras de validação para garantir a precisão dos dados
• Permitir que os usuários baixem dados modificados como um arquivo CSV

Ao final deste guia, você terá um aplicativo pseudo-planilha funcional e uma forte compreensão de como os formulários reativos do Angular simplificam o manuseio de dados complexos e dinâmicos.

Configurando o projeto Angular

Para começar, certifique-se de ter o Node.js e o Angular CLI instalados. Para criar um novo projeto Angular, execute o seguinte comando:

ng new dynamic-formarray-app

Durante a configuração, habilite o roteamento e escolha seu pré-processador CSS preferido. Após a criação do projeto, navegue até a pasta do projeto e instale as dependências necessárias, incluindo o Bootstrap para estilização:

npm install bootstrap

Adicione o Bootstrap em angular.json no array styles:

 "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"]

Adicione o PapaParse para uma análise robusta de CSV:

 npm install papaparse

Finalmente, gere um novo componente para a interface da planilha:

ng generate component components/spreadsheet

Carregando e analisando dados CSV

Para gerar controles de formulário dinamicamente, precisamos primeiro carregar e analisar um arquivo CSV. Adicione um elemento de entrada de arquivo ao seu template:

Upload CSV File:

No arquivo de componente (spreadsheet.component.ts), use o FormBuilder do Angular e o PapaParse para processar o arquivo enviado:

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import * as Papa from 'papaparse';

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

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.spreadsheetForm = this.fb.group({ rows: this.fb.array([]) });
  }

  get formArray(): FormArray {
    return this.spreadsheetForm.get('rows') as FormArray;
  }

  onFileUpload(event: Event): void {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      Papa.parse(file, {
        complete: (result) => this.loadCsvData(result.data),
        skipEmptyLines: true
      });
    }
  }

  loadCsvData(data: any[]): void {
    const rows = this.formArray;
    rows.clear();
    data.forEach((row) => {
      const formRow = this.fb.array(row.map((value: string) => this.fb.control(value, Validators.required)));
      rows.push(formRow);
    });
  }
}

Renderizando dados CSV dinamicamente

Após analisar os dados, o próximo passo é renderizá-los dinamicamente em uma grade que imita uma planilha. Cada linha no FormArray corresponde a uma matriz de FormControl.

No template (spreadsheet.component.html), use diretivas estruturais do Angular para exibir linhas e células:

  

    

      
      

        This field is required.
      

    

  

Adicionando regras de validação

A validação garante que a entrada atenda a critérios específicos. O Angular suporta validadores internos como Validators.required e permite lógica de validação personalizada.

Validador numérico personalizado

Crie um validador personalizado para garantir a entrada numérica:

function validateNumeric(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    return isNaN(value) || value.trim() === '' ? { numeric: true } : null;
  };
}

Atualize o método loadCsvData para incluir este validador:

loadCsvData(data: any[]): void {
  const rows = this.formArray;
  rows.clear();
  data.forEach((row) => {
    const formRow = this.fb.array(row.map((value: string) => this.fb.control(value, [Validators.required, validateNumeric()])));
    rows.push(formRow);
  });
}

Exportando dados modificados

Uma vez que o usuário modifica o formulário, permita que ele baixe os dados atualizados como um arquivo CSV usando a API Blob.

Eis o código para a exportação do CSV:

downloadCsv(): void {
  const headers = ['Column 1', 'Column 2', 'Column 3'];
  const rows = this.formArray.controls.map((row) =>
    (row as FormArray).controls.map((control) => control.value)
  );

  const csvArray = [headers, ...rows];
  const csvData = csvArray.map((row) => row.join(',')).join('n');

  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
  const url = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'modified-data.csv');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}

Adicionando botão de download

Finalmente, incluiremos um botão no template para acionar o download:

Download Modified CSV

Conclusão

Ao seguir este guia, você aprendeu a:

• Analisar arquivos CSV e vincular os dados dinamicamente ao FormArray do Angular
• Validar a entrada do usuário usando validadores internos e personalizados
• Exportar dados modificados de volta para um formato CSV

Esta solução é altamente adaptável, tornando-se adequada para vários cenários do mundo real, como grades de dados, pesquisas ou planilhas interativas.

Feliz codificação!