Os formulários são essenciais para coletar dados e o Angular Form Builder da App Builder permite criar formulários usando uma interface intuitiva de arrastar e soltar e recursos poderosos. Tudo com personalização total, flexibilidade de código e sem dependência de fornecedor.
Zdravko Kolev
10min de leitura
Formulários são essenciais para coletar dados. Não importa qual aplicativo você crie, você terá que criar um formulário que atenda a propósitos diferentes em algum momento. Com o Form Builder do App Builder, você pode agilizar a criação de formulários Angular por meio de uma interface intuitiva de arrastar e soltar e vários recursos adicionais poderosos, garantindo que a criação de formulários seja mais rápida e eficiente.
Mas falaremos mais sobre isso depois. Agora, vamos dar uma olhada no Forms e explorar como App Builder integra Angular Form Builder para simplificar a criação de formulários.
Tradicionalmente, criar formulários no Angular requer escrever código boilerplate para definir controles, grupos e validações. No entanto, usar Angular Form Builder reduz esse esforço manual e elimina erros. Portanto, um Form Builder no Angular é uma ferramenta ou uma funcionalidade separada que fornece uma maneira mais estruturada para criação mais direta e automatizada de formulários enquanto gerencia as configurações de layout mencionadas acima, controles de formulário, validações, grupos e muito mais.
Nossa ferramenta de low-code —App Builder ™ —introduziu recentemente um novo recurso que fornece todos esses recursos. Trabalhando como um Angular drag-and-drop, o Form Builder torna o design de formulários HTML rápido e mais eficiente, com recursos críticos como a geração automática de estruturas de formulário diretamente de endpoints de API, que levam a integração de backend a outro nível e simplificam o processo significativamente.
Há também ampla flexibilidade em layouts de formulários e personalização profunda com opções para exibir notificações de envios, erros e validações do lado do servidor.
Principais aspectos do Form Builder:
Em aplicativos Angular, FormControl, FormGroup, FormArray e ControlValueAccessor representam os componentes mais fundamentais dos formulários Reactive. Vamos verificar cada um e tentar entender suas funções e funcionalidades.
Em sua essência, FormControl é uma classe em Angular usada para rastrear o valor e o status de validação de um campo de formulário individual. Ele também suporta validações síncronas e assíncronas. Aqui estão alguns pontos-chave sobre FormControl:
Como os formulários reativos são criados em uma classe de componente, a validação de formulários reativos Angular acontece adicionando funções validadoras diretamente ao modelo de controle de formulário na classe de componente.
Quando o valor é válido, os validadores retornam nulo. Se o valor for inválido, os validadores geram um conjunto de erros, e você pode exibir uma mensagem de erro específica na tela.
A demonstração abaixo mostra um formulário típico de reserva de filme usando validação de formulário reativa Angular, onde campos obrigatórios — filme, nome completo, e-mail e gênero — devem ser preenchidos antes do envio. Entradas incompletas são destacadas em vermelho com mensagens de erro específicas, enquanto campos válidos ficam verdes. O botão “Reservar” permanece desabilitado até que todos os campos sejam preenchidos corretamente, o que é ativado, permitindo o envio bem-sucedido do formulário.
Um FormGroup no Angular é um contêiner que agrega múltiplas instâncias de FormControl. Ele rastreia os valores e estados de validação de seus controles de formulário filho, serializando-os em um objeto usando seus respectivos nomes como chaves.
O FormArray é particularmente útil para formulários que exigem um número variável de controles semelhantes, como adicionar vários endereços de e-mail ou números de telefone.
Exemplo de código de um formulário onde os usuários podem inserir várias entradas, como endereços de e-mail:
importar { Componente } de '@angular/core'; importar { FormGroup, FormArray, FormControl, Validadores } de '@angular/forms'; @Component({ selector: 'app-email-form', template: \` <form [formGroup]="form"> <div formArrayName="emails"> <div *ngFor="let email of emailArray.controls; let i = index"> <label for="email-{{ i }}">Email {{ i + 1 }}</label> <input id="email-{{ i }}" type="email" [formControlName]="i" placeholder="Digite o e-mail" /> <button type="button" (click)="removeEmail(i)">Remover</button> </div> </div> <button type="button" (click)="addEmail()">Adicionar e-mail</button> <button type="submit" [disabled]="form.invalid">Enviar</button> </form> <p>Valor do formulário: {{ form.value | json }}</p> \`, }) export class EmailFormComponent { form = new FormGroup({ emails: new FormArray([new FormControl('', Validators.email)]), }); get emailArray(): FormArray { return this.form.get('emails') as FormArray; } addEmail() { this.emailArray.push(new FormControl('', Validators.email)); } removeEmail(index: number) { this.emailArray.removeAt(index); } }
Os principais recursos incluem:
Aqui está um exemplo de código:
const profileForm = new FormGroup({ firstName: new FormControl('', Validators.required), lastName: new FormControl(''), email: new FormControl('', [Validators.required, Validators.email]), });
Neste trecho de código, se qualquer controle filho for inválido, o grupo inteiro será considerado inválido.
O FormGroup atua como um contêiner para um ou mais controles de formulário. Ele agrupa campos relacionados e permite que você gerencie coletivamente seus valores e validação. Ele é inicializado com:
O que o FormGroup faz no exemplo acima:
FormArray é similar a FormGroup, mas em vez de usar nomes como chaves, ele organiza os controles como uma matriz indexada. Isso o torna ideal para cenários onde o número de controles é dinâmico, como adicionar vários itens a uma lista. Os principais recursos incluem:
ControlValueAccessor é uma interface que permite que formulários Angular interajam com controles de formulário personalizados, garantindo que eles se comportem como elementos de formulário padrão. Ao criar componentes personalizados que funcionam como controles de formulário (por exemplo, um seletor de data personalizado), implementar ControlValueAccessor permite integração perfeita com formulários reativos do Angular.
Aqui está um exemplo de ControlValueAccessor:
@Component({ selector: 'custom-input', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true } ] }) export class CustomInputComponent implements ControlValueAccessor { // Implementação aqui }
Esta configuração garante que o componente de entrada personalizado possa ser usado dentro de formulários Angular como qualquer elemento de formulário nativo. O que você obtém é:
Velocidade e eficiência são essenciais ao construir aplicativos hoje em dia. Então, mesmo quando se trata de criar formulários, as equipes buscam a melhor maneira de otimizar os resultados e impulsionar seus esforços. Unir Angular Form Builder com low code se torna um movimento estratégico que garante várias vantagens.
Criação rápida de formulários
Criar formulários manualmente e escrever código leva muito mais tempo do que gerar código. Com a experiência de construção de formulários de arrastar e soltar do App Builder, você tem as ferramentas e os recursos para criar formulários mais rapidamente sem codificação extensiva. Você pode facilmente gerar formulários completos diretamente de endpoints de API, economizando tempo e esforço significativos.
Personalização completa
Além da velocidade, você pode procurar por flexibilidade e personalização. O Angular Form Builder no App Builder permite que você personalize o estilo, os componentes e os layouts de formulário para corresponder à marca e a qualquer requisito. Há configurações intuitivas para ajudar você a adicionar validações, mensagens de erro e outros aprimoramentos personalizados.
Colaboração melhorada
A criação de formulários geralmente envolve designers também que marcam a experiência. Isso geralmente leva a cronogramas prolongados para a construção de formulários, pois as equipes trocam transferências e arquivos de design para aprovação e desenvolvimento. No entanto, App Builder e a funcionalidade Angular Form Builder aprimoram essa colaboração, pois você não precisará testar e depurar estruturas de formulários todas as vezes. A interface intuitiva garante processos de design simplificados com formulários que podem ser facilmente gerados imediatamente. Não há necessidade de ampla experiência técnica.
Escalabilidade
Seu aplicativo pode crescer, e isso requer escalabilidade. Os formulários criados com a funcionalidade mais recente do Form Builder do App Builder são escaláveis e permanecem com alto desempenho em todos os níveis de uso. E como não há bloqueio de fornecedor, você e sua equipe não abrem mão da funcionalidade de seus aplicativos.
Para este guia de como fazer, demonstraremos duas maneiras: automática e manual. Começaremos com um layout lado a lado existente que mostra claramente os cenários Master Detail no App Builder. Teremos uma lista de clientes e atualizaremos esses clientes com o formulário.
Etapa 1: Arrastando pontos de extremidade de dados
Para começar, arraste um endpoint de dados para a superfície de design. Um conjunto de componentes de formulário será gerado automaticamente com base nas propriedades do endpoint.
Etapa 2: Criação e mapeamento automáticos de controles de formulário
Os controles de formulário são criados com base no tipo de dados e metadados de cada campo, garantindo entradas e rótulos intuitivos (por exemplo, campos de data usam seletores de data, campos booleanos usam switches). Os desenvolvedores mantêm controle total para modificar componentes, adicionar validações ou ajustar rótulos diretamente no painel de propriedades.
Etapa 3: Editando o formulário
Uma vez gerado, o formulário pode ser modificado para incluir ou excluir campos, personalizar rótulos e definir validações de entrada, oferecendo uma experiência de design intuitiva. App Builder permite que os desenvolvedores personalizem o layout e os componentes do formulário:
Você também pode criar Forms manualmente no App Builder. O benefício dessa abordagem é que ela garante controle completo sobre a estrutura e o layout sem exigir vinculações imediatas a fontes de dados.
Etapa 1: Arraste e solte elementos
Isso acontece arrastando e soltando elementos como campos de entrada, botões e componentes de formulário no contêiner de formulário para projetar o formulário.
Etapa 2: Vinculação da fonte de dados
Uma vez que o formulário é projetado, os desenvolvedores podem vinculá-lo a um endpoint a partir de fontes de dados configuradas. Essa flexibilidade garante a capacidade de refinar elementos do formulário antes de definir interações de dados.
Etapa 3: Comportamento de vinculação e validações
Se você alternar entre pontos de extremidade depois que seu formulário for criado, entradas não correspondentes exibirão um aviso de associação inválida, e essas associações não serão geradas como associações quebradas na saída do código. Você também pode inicializar uma nova variável na caixa de diálogo de vinculação de ponto de extremidade do formulário com o ponto de extremidade de dados da API, fornecendo o contexto necessário para a inicialização do formulário.
Ligações inválidas são excluídas do código gerado, garantindo que o aplicativo seja compilado sem erros. Para minimizar interrupções ao alternar endpoints, App Builder fornece avisos sobre possíveis invalidações.
Não importa qual abordagem você escolher, no final, você pode usar o modo de visualização do App Builder para interagir com o formulário e ver validações de entrada ou envios de formulário em tempo real, com notificações indicando sucesso ou erros de validação.
Agora que sabemos que o low-code veio para ficar, a questão é: como sua organização está se preparando para o próximo capítulo? Nos últimos anos, ferramentas low-code como App Builder têm como alvo vários pontos problemáticos na criação de aplicativos, permitindo que executivos de nível C e líderes de equipe de desenvolvimento acelerem o tempo de lançamento no mercado, automatizem aplicativos [...]
Na versão mais recente do App Builder, adicionamos uma nova Grade Hierárquica à caixa de ferramentas do componente e à implantação do GitHub Pages para hospedar sites estáticos diretamente de um repositório. Leia mais e experimente novos controles e recursos.
O low-code tornou-se um catalisador para a rápida transformação digital em empresas de diferentes portes e setores. Essas ferramentas veem um crescimento constante em seu impacto nos negócios – desde a remodelação de toda a cultura corporativa que implementa estruturas rígidas focadas em fluxos de trabalho tradicionais até o estabelecimento de hubs inovadores que são mais ágeis e preparados para qualquer mudança de mercado.
