Como criar um formulário dinâmico simples com Angular?

Precisando de uma introdução ao formulário dinâmico com Angular?

A seguir um guia de apenas três minutos para você iniciar.

Lutando para criar um formulário dinâmico com Angular?

Nesse artigo trabalharemos com um simples exemplo, pegando JSON e usando ele para renderizar dinamicamente um formulário reativo com Angular.

O JSON vai permitir que nossos exemplos se mantenham simplificados, mas o projeto é seu. Faça aquilo que quiser. Faça uma chamada HTTP para seu servidor API para o JSON, organize o arquivo JSON com seu aplicativo Angular, ou até mesmo...

...hm...

...embrulhe numa meia e jogue no vaso.

Espera aí. Vaso?

Ah!

JSON blobs e formulários dinâmicos. OK, vamos começar.

Nosso JSON

Este é um dado que vamos estar usando para renderizar dinamicamente o formulário.

[
    {
        "fieldName": "Name",
        "fieldType": "text",
        "required": true
    },
    {
        "fieldName": "Email",
        "fieldType": "email",
        "required": true,
        "validator": "email"
    },
    {
        "fieldName": "Message",
        "fieldType": "text",
        "required": null
    }
]

Vamos usar esse JSON como uma dinâmica afirmação de como nosso formulário vai parecer.

Por que dinâmica?

Porque, rapaz, assim que tivermos o formulário dinâmico com Angular conectado, tudo o que vamos precisar fazer é trocar o JSON para aquilo que seu chefe vai querer e então o formulário vai mudar.

Quer inserir um field? Apenas acrescente um novo item ao JSON.

Dinâmica é a palavra.

Criando um formulário dinâmico com Angular com a resposta JSON

Primeiramente vamos gerar uma classe usada para dar molde aos campos do nosso formulário e fazer que ele pareceça agradável.

ng generate class form-field

Depois no arquivo form-field.ts vamos colocar as propriedades JSON, assim:

export class FormField {
    fieldName: string;
    fieldType: string;
    required: boolean = false;
    validator: string;
}

Depois no arquivo componente typescript vamos usar um cliente HTTP para carregar e renderizar o JSON.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { FormField } from '../form-field';
import { FormControl, 
             FormGroup, 
             ValidatorFn, 
             Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {

  formFields: FormField[];
  form = new FormGroup({});

  constructor(
    private httpClient: HttpClient
  ) { }

  ngOnInit(): void {
    this.httpClient.get<FormField[]>("/assets/form.json").subscribe((formFields) => {
      for (const formField of formFields) {
        this.form.addControl(formField.fieldName, new FormControl('',this.getValidator(formField)));
      }
      this.formFields = formFields;
    });
  }

  onSubmit(): void {
    if (this.form.valid) {
      let value = this.form.value;
    }
  }

  private getValidator(formField: FormField): ValidatorFn {
    switch(formField.validator) {
      case "email":
        return Validators.email;
      case "required":
        return Validators.required;
      default:
        return null;
    }
  }

}

E por fim, esse é o elemento HTML para o nosso componente.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div *ngFor="let formField of formFields" class="form-group">
        <label> {{ formField.fieldName }}</label>
        <input class="form-control" 
                   type="{{ formField.fieldType }}" 
                   value="{{ formField.fieldName }}" 
                  [required]="formField.required" 
                  formControlName="{{ formField.fieldName }}" />
        <br>
    </div>
    <button type="submit" 
                 class="btn btn-primary" 
                 [disabled]="this.form.invalid">Submit</button>
</form>

Com um bocado de CSS Bootstrap nós conseguimos um formulário como esse.

Conclusão

Esse é um exemplo bem básico de como um formulário dinâmico pode ser criado.

Sei que você é inteligente, então tenho certeza que você notou que esse exemplo tem suas limitações. Uma parte que está em falta é a validação de entrada (input).

Então vá em frente. Comece a partir daqui e acrescente mais potência para que vire um super formulário dinâmico com Angular.

Dúvidas ou comentários? Não deixe de entrar em contato.

Consultor Angular

Leitura Adicional

• https://angular.io/guide/dynamic-form
• https://danielk.tech/pt-br/formulario-dinamico-avancado-com-angular