FormView

FormView desenha um formulário do painel a partir de uma lista de seções, e cada seção tem uma lista de campos. Cada tipo de campo (texto, texto longo, data, seleção, mídia e outros) ganha o controle certo, com rótulo, dica e erro. Quando a validação recusa o envio, o formulário mostra um resumo no topo com um link para cada campo com erro.

Quando usar

Use para editar um registro ou para uma tela de configuração: um perfil, uma tela de módulo, as configurações do site. Para mostrar uma lista de registros, use DataTable. Para editar um post, use PostEditor, que tem a barra de publicação.

Os tipos de campo são os de ui/panel/types.ts:40: text, longText, richText, slug, email, url, number, boolean, date, datetime, select, multiSelect, relation, media, json e password. Um password nunca volta preenchido (ui/panel/form-view.ts:57, na propriedade values).

Regras que valem para o formulário inteiro:

• O resumo de erros diz «Há 1 campo para corrigir» ou «Há N campos para corrigir» (ui/panel/form-view.ts:187). A mensagem do formulário inteiro fica na chave form de errors.
• Uma seleção opcional começa com uma opção vazia: «Nenhuma» para media e «Nenhum» para os demais. Você troca o texto por emptyLabel (ui/panel/form-view.ts:109).
• Campos datetime são mostrados no fuso do site, que por padrão é America/Sao_Paulo (ui/core/date.ts:34).
• Com readOnly, todos os controles ficam travados e o botão de envio some (ui/panel/form-view.ts:67). Serve para um registro que a pessoa pode ler e não pode mudar.
• O token da sessão e os valores ocultos vão como campos hidden, sem aparecer na tela (ui/panel/form-view.ts:61).

Onde aparece no painel

• Configurações (/painel/configuracoes): panel/screens/site/configuracoes.ts:82.
• Aparência e menus (/painel/aparencia): o formulário do tema, em panel/screens/site/aparencia.ts:48.
• Meu perfil (/painel/perfil): as seções «Dados públicos» e «Acesso» (panel/screens/users/perfil.ts:125).
• Usuários, tela de edição (/painel/usuarios/:id): panel/screens/users/edit.ts:121.
• Backup (/painel/backup): panel/screens/ops/backup.ts:106 e panel/screens/ops/backup-files.ts:133.
• Privacidade (/painel/privacidade): panel/screens/ops/privacidade.ts:40.
• SEO do site (/painel/seo/global): modules/seo/screens/global.ts:105.
• Configuração de um módulo (/painel/modulos/:id): panel/screens/modules/configurar.ts:120.
• Formulários das coleções, como Categorias e Tags: panel/collections/routes.ts:486.

Variantes e propriedades

FormView

Pasta: ui/panel

Variantes

Id	Variante	Tom
form-view-perfil-light	perfil	light
form-view-modulo-light	modulo	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
id	string	Não	Prefix of every id; two forms on one screen MUST pass distinct ids. Default `form`.
action	string	Sim	—
method	"post" | "get"	Não	—
sections	readonly FormSection[]	Sim	—
values	Readonly<Record<string, FormValue>>	Não	Values by field name. A password is never written back.
errors	Readonly<Record<string, string>>	Não	Messages by field name; the `form` key is the message of the whole form.
csrf	string	Sim	—
hidden	Readonly<Record<string, string | readonly string[]>>	Não	Values posted with the form and never shown (e.g. `version`); a list gives one input per value.
submit	string	Sim	—
secondary	{ readonly label: string; readonly href: string; }	Não	—
timeZone	string	Não	IANA zone the `datetime` fields are shown in. Default `America/Sao_Paulo`.
readOnly	boolean	Não	Every control locked and no submit button: a record the user may read but not change.

Captura

A primeira variante do catálogo, o perfil, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/form-view.ts: FormView, FormField, FormSection e formFieldToPanelField.
• ui/panel/form-view.gallery.ts: as variantes do catálogo.
• ui/panel/types.ts: o tipo FormFieldKind.