Precisa de formulários para o seu próximo projeto? Veja como criar formulários com FormKit.

Os formulários são a porta de entrada para que os usuários se envolvam com seu aplicativo e forneçam dados essenciais para tarefas como criação de contas, processamento de pagamentos e coleta de informações. Mas a construção de formulários pode ser uma tarefa assustadora, exigindo um extenso código clichê que é demorado e sujeito a erros

O FormKit oferece uma solução fornecendo componentes pré-construídos que eliminam a necessidade de código clichê. Veja como usá-lo.

O que é o FormKit?

FormKitGenericName é uma estrutura de construção de formulários de código aberto desenvolvida especificamente para Vue 3, projetada para simplificar o processo de criação de formulários prontos para produção de alta qualidade. É uma versão melhorada do popular Fórmula Vue biblioteca e fornece mais de 25 opções de entrada personalizáveis ​​e acessíveis, juntamente com um conjunto predefinido de regras de validação.

O FormKit também oferece a capacidade de gerar formulários por meio de esquemas dinâmicos compatíveis com JSON, facilitando a criação rápida de formulários complexos. Além disso, o FormKit possui uma comunidade ativa no Discord, fornecendo suporte e promovendo a colaboração entre os usuários. Com seus recursos abrangentes e sistema de suporte, o FormKit é uma ferramenta confiável e eficiente para desenvolvedores que procuram criar formulários para seus projetos Vue 3.

instagram viewer

Recursos do FormKit Framework

Você encontrará uma ampla seleção de recursos de criação de formulários no FormKit.

1. API de componente único

Um dos recursos interessantes do FormKit é sua API de componente único: componente. Dá-lhe acesso a todos os tipos de entrada. Isso dá acesso direto e fácil à criação de elementos de formulário em vez de ter que usar elementos HTML nativos.

2. Regras de validação pré-definidas

Formkit simplifica o manuseio de validações de formulário permitindo que você aplique diretamente um conjunto de regras às entradas usando o suporte de validação. Possui mais de 30 regras pré-definidas diferentes que você pode selecionar de acordo com sua preferência. Como alternativa, você pode criar regras personalizadas registradas globalmente ou especificamente na entrada para restrições complexas.

3. Opções de estilo personalizáveis

O FormKit não vem com opções de estilo padrão, mas tem um tema base opcional - Genesis. Você precisa instalar isso separadamente.

Instalando primeiro o @formkit/themes pacote.

npm instalar @formkit/themes

Em seguida, importe-o para o seu projeto

importar'@formkit/themes/genesis'

Outras opções de estilo incluem o uso de classes personalizadas que permitem aplicar seus próprios estilos e classes à marcação fornecida pelo FormKit.

4. Geração de Esquema

A geração de esquema do FormKit é um excelente recurso que simplifica o processo de criação de campos de formulário. Um esquema é uma matriz de objetos, com cada objeto representando um elemento HTML e você pode representar apenas no formato JSON.

A matriz de esquema consiste em objetos de nó FormKit que correspondem a vários elementos, como elementos HTML, componentes ou nós de texto. Esses objetos podem fazer referência a variáveis ​​Vue pré-existentes e renderizar qualquer marcação ou componente com atributos e props editáveis, tornando-o um método eficiente de construção e personalização de formulários. Por padrão, ele não é registrado globalmente, então você precisa importá-lo.

importar { FormKitSchema } de'@formkit/vue'

Integrando o FormKit no Vue3

Para começar a usar o FormKit em um aplicativo Vue 3, primeiro instale-o em seu projeto. Esta seção envolverá uma demonstração usando um novo aplicativo vue do zero.

Pré-requisitos para usar o FormKit

Antes de começar, certifique-se de ter o seguinte:

  • Compreensão fundamental de Vue e JavaScript
  • Node.js e npm configurados em seu computador

Assim que estiver atualizado, você estará pronto para criar seu primeiro aplicativo.

Criando um novo aplicativo Vue

Primeiro, execute o comando abaixo em seu terminal para inicializar um novo aplicativo Vue:

npm init vue@mais recente

Em seguida, siga as etapas especificadas no prompt de acordo com sua preferência. Após a instalação completa do projeto, proceda à instalação do FormKit no aplicativo.

npm instalar @formkit/vue

A seguir, no main.js arquivo.

importar {criarAplicativo} de'vue'
importar'./estilo.css'
importar Aplicativo de'./App.vue'
// Configura o FormKit
importar { plug-in, defaultConfig } de"@formkit/vue";
// Importa o tema Genesis
importar"@formkit/themes/genesis";
criarAplicativo (Aplicativo).use(plugar, defaultConfig).mount('#aplicativo')

O pacote @formkit/vue vem com um plug-in Vue e uma configuração padrão para instalação perfeita. Depois de concluir a configuração, você está pronto para incorporar o componente em seu aplicativo Vue 3. Além disso, você pode adicionar a configuração para os temas do Genesis conforme indicado anteriormente.

Criando formulários reutilizáveis ​​com o FormKit

Esta seção demonstra como utilizar o FormKit na construção de um formulário funcional e personalizável, criando um formulário de registro simples.

Para uma melhor estrutura de código, é bom criar um arquivo separado para este componente: Formulário de registro.vue

Em primeiro lugar, defina o elemento de entrada usando este formato

tipo="texto"
 etiqueta="Primeiro nome"
 espaço reservado ="Abíola"
 validação="obrigatório | comprimento: 4"
ajuda = "Digite um mínimo de 4 caracteres"
<FormKitGenericName/>

Este código mostra como usar o FormKit para gerar uma entrada de texto usando um tipo de texto. A propriedade de validação separa as regras usando o símbolo pipe "|". O suporte de ajuda posiciona um pequeno texto logo abaixo do elemento de entrada.

Além disso, você pode explorar outros tipos de entrada como os abaixo.

tipo="texto"
 etiqueta="Sobrenome"
 espaço reservado ="Ester"
 validação="obrigatório | comprimento: 4"
ajuda = "Digite um mínimo de 4 caracteres"
 />
tipo="e-mail"
 etiqueta="Endereço de email"
 prefixo-ícone="e-mail"
 validação="obrigatório | e-mail"
 espaço reservado ="[email protected]"
 />
tipo="data"
 etiqueta="Data de nascimento"
ajuda="Digite sua data de nascimento no formato DD/MM/AAAA"
 validação="obrigatório"
 />
 v-model ="valor"
tipo="rádio"
 etiqueta="Gênero"
 :opções="['Masculino feminino']"
ajuda="Selecione o seu sexo"
 />
tipo="arquivo"
 etiqueta="Envie sua foto"
 aceitar=".jpg,.png,.jpeg"
ajuda="Selecione sua imagem"
 />

O código mostra como usar alguns dos outros elementos de entrada e definir as regras de validação.

FormKit inclui um suporte de tipo chamado "form" que envolve todos os elementos de entrada. Ele monitora o status de validação do formulário e bloqueia os usuários de enviá-lo se alguma entrada for inválida. Além disso, ele gera automaticamente um botão de envio.

tipo="forma"
 forma-aula="contêiner externo"
 submit-label="Registro"
@enviar="Registro">

Combinando tudo junto apresenta o formulário completo, como mostrado na imagem abaixo.

Geração de formulário usando o esquema do FormKit

Com os esquemas JSON, é possível gerar formulários semelhantes aos elementos de entrada, conforme feito anteriormente. Para gerar o formulário, basta fornecer sua matriz de esquema para o componente usando o esquema suporte.

A matriz do esquema

const esquema = [
 {
 $formkit: "e-mail",
 nome: "e-mail",
 rótulo: "Endereço de email",
 espaço reservado: "Digite seu e-mail",
 validação: "obrigatório | e-mail",
 },
 {
 $formkit: 'senha',
 nome: 'senha',
 rótulo: 'Senha',
 validação: 'obrigatório | comprimento: 5,16'
 },
 {
 $formkit: 'senha',
 nome: 'confirmação de senha',
 rótulo: 'Confirme sua senha',
 validação: 'obrigatório | confirmar',
 validaçãoLabel: 'ConfirmaÇão Da Senha',
 },
 ];

Em seguida, é passado para o prop no componente FormKit.

"forma" forma-aula="contêiner externo"submitlabel="Conecte-se">
<FormKitSchema:esquema="esquema" />
FormKitGenericName>

Esta é a saída final gerada:

Uma abordagem mais rápida para criar formulários no Vue3

O FormKit fornece uma abordagem mais rápida e eficiente para criar formulários no Vue 3. Com o FormKit, você pode eliminar a necessidade de criar modelos padronizados do zero, permitindo que você se concentre na implementação da lógica diretamente. Esse processo simplificado não apenas economiza tempo, mas também aumenta a produtividade.

Além disso, o FormKit permite a renderização dinâmica de formulários por meio da renderização condicional. Esse recurso permite criar interfaces interativas e fáceis de usar para os usuários, nas quais os elementos do formulário são exibidos ou ocultados com base em determinadas condições.