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 Para funcionar, o componente necessita ser configurado juntamente com outros componentes visuais, de acordo a necessidade do projeto. Nesse exemplo adicionamos os botões e o campos de entrada de texto.

Image Modified

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

Principais propriedades

Configuração

Vincular fonte de dados

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

Image Modified

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.

Image RemovedImage Added

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.

Image RemovedImage Added

Figura 2.2 - Adicionando campos ao formulário

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.

Image RemovedImage Added

Figura 3 - Adicionando ou removendo botões

Alterar ícones

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

Obs.: Selecione cada item da barra de botões e repita 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. 1. close.
3. Deixe o campo
Conteúdo
4. Título em branco;
5. Altere o campo Tema de acordo com a finalidade do botão:
   1. Azul para os botões gerais: tema
Positive
6. 1. Positivo;
   2. Vermelho para os botões de excluir ou cancelar: tema
Assertive
7. 1. Assertivo;
   2. Verde para o botão de salvar: tema
Balanced
8. 1. Equilibrado.

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.

Obs.: Selecione cada item da barra de botões para adicionar o evento correspondente.

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. 

Image RemovedImage Added

Figura 6 -  Configurando botões de Voltar e Próximo

• 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. 

Image Added

Figura 7 - Configurando propriedade Esconder SeImage Removed

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 (3abra a lista suspensa do campo Valor (2) e escolha em qual dos campos da fonte de dados (4) dados  será salvo. 

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

Image RemovedImage Added

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.

Image RemovedImage Added

Figura 9 - Habilitar apenas leitura no input