Função

Formulário é um componente para cadastrar, editar e exibir dados. Ele permite navegar entre os registros, adicionar, editar e excluir o registro ativo.

Animação 1 - Exemplo do componente associado com botões rodando no browser

Principais propriedades

Configuração

Vincular fonte de dados

Primeiro é feita a adição e configuração do componente fonte de dados no formulário. Depois selecione o componente Formulário clicando em form na árvore DOM (destaque 1 da Figura 1) e, na aba de Propriedades, vincule a fonte no campo Fonte de dados.

Figura 1 - Vinculando fonte de dados

Adicionar componentes

Adicione o componente Barra de Botões duas vezes. Selecione o componente e arraste o componente à div do formulário, verificando se as arestas da div do componente formulário estão tracejadas, e solte-o. Para adicionar outro componente, arraste-o e solte-o embaixo de componente recém-adicionado.

Figura 2.1 - Adicionando botões ao formulário 

Em seguida, adicione alguns componentes para exibir os campos da fonte de dados. Arraste o componente do editor visual e solte-o na área de edição embaixo do componente Barra de botões.

Figura 2.2 - 

Configurar botões

Adicionar ou remover botões

Clique no componente Barra de botões e, na aba de Propriedades, role até a seção de Itens e clique no ícone de Adicionar (1 da Figura 3) para adicionar botões ou no ícone de Remover (2) para remover o botão. Adicione dois itens na primeira barra e remove um item da segunda.

Alterar ícones

Após adicionar e remover itens, vamos alterar os ícones e temas dos botões. Na aba Propriedades do componente, role até a seção Itens e selecione sobre o nome o item. Você será redirecionado para as Propriedades do botão selecionado. Siga os passos abaixo.

Figura 4 - Alterando ícone do botão

1. Na aba de Propriedades do botão, altere o ícone no campo Ícone. Os ícones utilizados nesse exemplo serão: 
   1. Inserir: ion-android-add;
   2. Editar: ion-android-create;
   3. Anterior: ion-android-arrow-back;
   4. Próximo: ion-android-arrow-forward;
   5. Excluir: ion-android-close;
   6. Salvar: ion-android-done;
   7. Cancelar: ion-android-cancel.
2. Deixe o campo Conteúdo em branco;
3. Altere o campo Tema de acordo com a finalidade do botão:
   1. Azul para os botões gerais: tema Positive;
   2. Vermelho para os botões de excluir ou cancelar: tema Assertive;
   3. Verde para o botão de salvar: tema Balanced.

Configurar eventos

Assim como no tópico anterior, selecione cada botão de forma separada e vá para a aba de Eventos. Adicione a propriedade ng-click (destaque em amarelo da Figura 5) no campo Novo Evento, seguido do evento de acordo com cada botão.

Figura 5 - Adicionando evento ao botão

1. Evento do botão Inserir: datasource.startInserting()
2. Evento do botão Editar: datasource.startEditing()
3. Evento do botão Voltar: datasource.previous()
4. Evento do botão Próximo: datasource.next()
5. Evento do botão Excluir: datasource.remove()
6. Evento do botão Salvar: datasource.post()
7. Evento do botão Cancelar: datasource.cancel()

Agora adicione nos botões Voltar e Próximo a propriedade Desabilitar Se para que o formulário percorra apenas a quantidade de itens na fonte de dados. 

Figura 6 - 

• Selecione o botão Voltar e, na aba de Propriedades, clique no link Exibir mais localizado ao fim da aba. Inclua no campo Desabilitar Se (Figura 6) a propriedade !datasource.hasPrevious().
• Selecione o botão Próximo e, na aba de Propriedades, clique no link Exibir mais localizado ao fim da aba. Inclua no campo Desabilitar Se (Figura 6) a propriedade !datasource.hasNext().

Esconder botões

Nesse tópico vamos abordar como os botões vão se comportar no modo de edição e inserção de itens. 

1. Clique no primeiro componente Barra de botões e, na aba de Propriedades, clique em Exibir mais localizado ao fim da aba. Inclua no campo Esconder Se a propriedade datasource.editing || datasource.inserting para esconder o componente quando entrar em modo de edição ou inserção.
2. Clique no segundo componente Barra de botões e, na aba de Propriedades, clique em Exibir mais. Inclua no campo Esconder Se a propriedade !datasource.editing && !datasource.inserting para mostrar o componente apenas quando entrar em modo de edição ou inserção.

Configurar campo

Vincular campo da fonte

Para que o item seja salvo, é necessário vincular o componente com um campo da fonte de dados. Então, selecione no componente (destaque 1 da Figura 8) e, na aba Propriedades, pouse o mouse sobre o campo Valor e clique no ícone de Editar Expressão (2) para abrir a janela de configuração do conteúdo (seta da Figura 8). Selecione a aba Campo de tela (3) e escolha em qual dos campos da fonte de dados (4) será salvo. 

Obs.: Deve-se fazer esse procedimento para todos os componentes adicionados ao formulário.

Figura 8 - Vinculando campo da fonte ao componente

Habilitar apenas leitura

Por fim, alguns componentes permitem adicionar a propriedade apenas leitura para que não seja possível escrever no item quando não estiver em modo de inserção ou edição. No caso de um componente Entrada de texto, selecione-o e desagrupe-o. Selecione somente a tag input (Figura 9), clique em Exibir mais e adicione o conteúdo !datasource.editing && !datasource.inserting na propriedade Apenas leitura.

Obs.: Repita esse procedimento para todos os campos adicionados no formulário.

Figura 9 - Habilitar apenas leitura no input