Input Select

Componente de input para seleção de itens em uma lista de opções, com suporte a carregamento de opções por requisição ajax.

Props

options Array

Lista estática de opções do select. Cada elemento da lista é um objeto com as propriedades "name" e "value" onde, respectivamente, se referem ao nome e o valor da opção.

default: []

optionsUrl String

Endereço URL que serve os dados para o select.

default: undefined

optionsParam String

Nome da propriedade do objeto recebido pelo servidor contendo as opções do select.

default: null

nameField String

Nome da propriedade do objeto recebido pelo servidor contendo o nome da opção.

default: 'name'

valueField String

Nome da propriedade do objeto recebido pelo servidor contendo o valor da opção.

default: 'id'

dependsOn Object

Objeto definindo o input em que este select é dependente.

dependableId String

Id do elemento DOM para o input dependente.

param String

Parâmetro a ser enviado ao servidor para requisição das opções.

default: null

multiple Boolean

Caso true, habilita a seleção de múltiplas opções.

default: false

onSelect Function

Função callback executado ao selectionar opção no select.

default: null
function onSelect(event) {
  // lógica executada ao selecionar opção
}

onLoad Function

Função callback executada ao carregar opções do select.

default: function (data) { return true; }
function onLoad(event) {
  // lógica executada ao carregar opções
}

onLoadError Function

Função callback executado em caso de erro no carregamento das opções.

default: null
function onLoadError(xhr, status, error) {
  // logica em caso de erro.
}

includeBlank Boolean

Caso true, inclui um item nulo no início da lista.

default: true

blankText String

Texto do item nulo da lista.

default: 'select'

themeClassKey String

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

default: "input.select"

Definindo um select

Um formulário com select listando estados que o usuário pode selecionar pode ser implementado com opções estáticas, seguindo o exemplo abaixo:

var formProps = {
  inputs: {
    state: {
      label: 'Estado',
      component: 'select',
      options: [
        {
          value: 0,
          name: 'Rio de Janeiro'
        },
        {
          value: 1,
          name: 'São Paulo'
        }
      ]
    }
  }
};

O mesmo formulário, utilizando opções carregadas via ajax para a url "/states" que retorna uma lista de estados, pode ser implementado da seguinte maneira:

// Resposta do servidor
type StatesResponse = {
  states: Array<State>,
  count: number
}

// Objeto de Estado
type State = {
  pk: number,
  fullname: string,
  shortname: string
}

// Props de um formulário utilizando
// o componente InputSelect
var formProps = {
  inputs: {
    state: {
      label: 'Estado',
      component: 'select',

      optionsUrl: '/states'
      optionsParam: 'states',
      nameField: 'fullname',
      valueField: 'pk'
    }
  }
};

// form
// <Form {...formProps} />

Definindo selects dependentes

Inputs do tipo select podem ter opções que dependem de valores de outros inputs do formulário, como a listagem de cidades de um determinado estado. Para alcançar esta função, configure o componente como dependente seguindo o exemplo abaixo:

var formProps = {
  inputs: {
    state: {
      label: 'Estado',
      component: 'select',
      optionsUrl: '/states'
    },
    city: {
      label: 'Cidade',
      component: 'select',
      optionsUrl: '/cities',
      dependsOn: {
        dependableId: 'state'
      }
    }
  }
};

// form
<Form {...formProps} />