Form

Componente para criação de formulários.

Props

inputs Object obrigatório

Objeto que define as props dos inputs do formulário, onde a chave é o id do input. Veja o componente Input.

inputs: {
  name: {
    label: "Nome do produto"
  },
  price: {
    label: "Preço",
    component: "masked",
    maskType: "currency"
  }
}

action String

Endereço URL para o envio dos dados do formulário.

default: ''

data Object

Mapa para os valores dos inputs, onde a chave é o id do input e o valor dessa é o valor associado ao input.

default: {}
data: {
  name: 'Caneta Esferográfica',
  price: 1.85
}

method String

Método http utilizado para envio dos dados do formulário.

default: "POST"

dataType String

Tipo de dado esperado na resposta do servidor. Veja documentação detalhada em JQuery.ajax.

default: Automático (xml, json, script, html)
"xml"

Resposta como documento XML.

"html"

Resposta como documento HTML.

"script"

Resposta como código JavaScript.

"json"

Resposta como documento JSON.

"jsonp"

Resposta como documento JSON usando JSONP.

"text"

Resposta como documento de texto.

Multiplos valores, separados por espaço

Converte o documento recebido de um determinado tipo para outro. Por exemplo, para uma resposta do tipo texto ser tratada como um objeto XML, use text xml.

contentType String

Tipo de dado enviado na requisição ao servidor. Veja mais em W3C/Forms.

default: "application/x-www-form-urlencoded"

multipart Boolean

Caso true, especifica que o formulário deve utilizar multipart/form-data como contentType.

default: false

style String

Estilo da grid de inputs especificado nas configurações de tema.

default: "default"
Realize.themes.myCustomTheme = {
  form: {
    cssClass: 'custom-form'
  }
};

// Nas props do form
{
  style: "myCustomTheme",
  ...
}

themeClassKey String

Chave atribuida ao objeto especificado nas configurações de tema.

default: "form"

resource String

Essa propriedade serve para alterar o name e o id dos inputs gerados pelo componente Form. Veja o componente Input para mais informações e exemplos.

default: null

submitButton Object

Atributos do botão submit.

name String

Nome do botão submit ou chave da string de localização nas configurações de recursos i18n e l10n.

default: "actions.send"
icon String

Nome do ícone utilizado no botão.

default: "send"

otherButtons Object

Lista de objetos especificando as props dos botões adicionais do formulário. Veja o componente Button.

default: []
otherButtons: [
  {
    name: 'actions.clear',
    icon: 'delete'
    element: 'button',
    type: 'reset'
  }
]

isLoading Boolean

Caso true, informa que o componente está sendo carregado.

default: false

onSubmit Function

Função callback executada ao receber evento submit.

default: function(event, postData) {}

onReset Function

Função callback executada ao receber event de reset.

default: function(event) {}

ajaxSubmit Boolean

Caso true, a chamada ao backend será feita através de ajax.

default: true

disabled Boolean

Caso true, os itens do Form serão desabilitados.

default: false

readOnly Boolean

Caso true, os itens do Form serão somente para leitura.

default: false