A entrada repeater é para repetir grupos de entradas. Você pode usar qualquer número de entradas FormKit dentro de um repeater, e os repeaters podem ser infinitamente aninhados.
Por padrão, a entrada repeater tem a capacidade de deslocar, adicionar e remover itens:
Diferentemente da maioria dos outros tipos de entrada FormKit, a entrada repeater é do tipo list. Você pode ver acima que a propriedade users (o valor do nosso repeater) é um array.
Como todas as outras entradas FormKit, o Repeater pode ser usado em um formulário escrito no esquema schema do FormKit.
No exemplo anterior, o botão 'Adicionar Usuários' é fornecido por padrão, e o rótulo do botão é derivado do label do repeater. Podemos personalizar o rótulo usando a propriedade add-button e definindo-a como uma string, ou removê-la completamente definindo-a como false. Alternativamente, semelhante à propriedade submit-attrs nos formulários FormKit, podemos fornecer um objeto de atributos a serem aplicados ao botão com add-attrs. Neste exemplo, mudamos o rótulo do repeater de Add Users para Meu rótulo personalizado usando a propriedade add-label:
Como muitas outras entradas FormKit, o repeater vem com as propriedades min e max. Você pode usar essas propriedades para limitar o número de itens a serem adicionados ou removidos.
Quando um repeater é permitido estar vazio, tendo sua propriedade min definida como 0 e não tendo valores, você pode controlar o conteúdo renderizado no estado vazio usando o slot empty.
A entrada repeater por padrão vem com um conjunto de controles que permitem deslocar, adicionar e remover itens. Você pode controlar a visibilidade desses controles definindo as propriedades upControl, downControl, insertControl e removeControl como true ou false.
Com o repetidor do FormKit, você não está restrito aos nossos controles padrão. Você pode manipular o repetidor da maneira que quiser:
Você pode definir erros em um repetidor ou em qualquer item repetível usando notação por ponto. Aqui estamos usando o
setErrors auxiliar, mas existem outros métodos também:
// o 2º argumento de setErrors são erros no nível do input
formNode.setErrors( null, // sem erros no formulário,
{
// erro no campo repetidor:
'teamMembers': ['Houve um problema com 1 dos seus membros da equipe.']
// erro em um item específico do repetidor:
'teamMembers.1.email': ['emily@formkit.com já está em uma equipe.'],
}
)
Lembre-se, seu manipulador de envio recebe o node central do formulário e pode ser usado
para definir erros convenientemente em profundidade. Leia mais sobre o tratamento de erros
aqui. Aqui está um exemplo de um backend fictício
retornando erros tanto para o repetidor quanto para um filho:
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| add-label | string | null | Usado para alterar o rótulo do botão de adicionar. |
| add-attrs | object | [object Object] | Usado para aplicar atributos ao elemento do botão de adicionar. |
| add-button | boolean | true | Condicional para mostrar ou não o botão de adicionar. |
| up-control | boolean | true | Condicional para mostrar ou não o controle de subir. |
| down-control | boolean | true | Condicional para mostrar ou não o controle de descer. |
| insert-control | boolean | false | Condicional para mostrar ou não o controle de inserir. |
| remove-control | boolean | true | Condicional para mostrar ou não o controle de remover. |
| min | Number | 1 | O número mínimo de filhos. |
| max | Number | null | O número máximo de filhos. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
Você pode direcionar uma seção específica de uma entrada usando a "key" dessa seção, permitindo que você modifique as classes, HTML (por meio de :sections-schema ou o conteúdo (por meio de slots) dessa seção). Saiba mais sobre as seções aqui.
| Section-key | Descrição |
|---|---|
| fieldset | Um elemento fieldset que atua como o invólucro do repetidor. |
| legend | Um elemento legend que renderiza o rótulo. |
| items | Um elemento ul que envolve os itens do repetidor. |
| item | Um elemento li que é renderizado para cada item do repetidor. |
| content | Um contêiner para a seção do grupo. |
| group | Não renderiza um elemento. Estrutura o slot padrão em uma estrutura de dados de objeto. |
| controls | Um elemento ul que envolve os controles do repetidor. |
| controlLabel | Um elemento span que renderiza o rótulo do controle dado. |
| up | Um elemento li que renderiza o controle de subir. |
| upControl | Um elemento button que renderiza o controle de subir. |
| moveUpIcon | Um elemento span que renderiza o ícone do upControl. |
| down | Um elemento li que renderiza o controle de descer. |
| downControl | Um elemento button que renderiza o controle de descer. |
| moveDownIcon | Um elemento span que renderiza o ícone do downControl. |
| insert | Um elemento li que renderiza o controle de inserir. |
| insertControl | Um elemento button que renderiza o controle de inserir. |
| insertIcon | Um elemento span que renderiza o ícone do insertControl. |
| remove | Um elemento li que renderiza o controle de remover. |
| removeControl | Um elemento button que renderiza o controle de remover. |
| removeIcon | Um elemento span que renderiza o ícone do removeControl. |
| Mostrar Universal section keys | |
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |
Todos os campos de entrada do FormKit são projetados com as seguintes considerações de acessibilidade em mente. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:
| Chave de Seção | Atributo | Padrão | Descrição |
|---|---|---|---|
| items | role | list | Indica para as tecnologias assistivas que este elemento funciona como uma lista. |
| item | role | listitem | Indica para as tecnologias assistivas que este elemento funciona como um item de lista. |
| Mostrar Universal chave de seção | |||
| label | label | for | Associa isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| input | input | disabled | Desabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo |
| aria-describedby | Aprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela | ||
| aria-required | Adiciona o estado necessário quando a validação é exigida. | ||
| icon | icon | for | Sempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| Evento de Teclado | Descrição |
|---|---|
| Tab | Move o foco para a próxima entrada focalizável na página. |
| Shift + Tab | Move o foco para a entrada focalizável anterior na página. |