Função

Formulário é um componente que permite visualizar, cadastrar, editar e excluir o registro ativo da Fonte de dados vinculada. Os botões no componente permitem executar diversas ações na fonte de dados e o elemento div aceita subcomponentes que serão vinculados aos atributos da fonte de dados.

Animação 1 - Exemplo do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Aba de Estilos

Os componentes Formulário não possuem propriedades de estilo específicas.

Subcomponentes

Esse componente é formado por oito subcomponentes agrupados: seis botões e uma div. Cada um possui uma função que vem configurada no componente. Selecione um dos subcomponente clicando em cima.

Todos os subcomponentes "botão" executam alguma ação na Fonte de dados configurada.

Configuração

Vincular fonte de dados

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

Figura 1 - Vinculando fonte de dados

Adicionar campo

Em seguida, arraste um componente à div do formulário, verificando se as arestas da div no componente formulário estão tracejadas, e solte-o (Figura 2). Para adicionar outro componente, selecione o componente recém-adicionado e clique no ícone "+" adicionar elemento do próprio componente.

Figura 2 - Adicionando campo

Configurar campo

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 3) 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 3). Selecione a aba Campo de tela (3) e escolha em qual dos campos da fonte de dados (4) será usado. 

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

Figura 3 - Vinculando campo da fonte a entrada de texto

Por fim, alguns componentes permitem adicionar a propriedade Apenas Leitura (ng-readonly) 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 (destaque 1 da Figura 3.1), adicione o conteúdo !datasource.editing && !datasource.inserting na propriedade Apenas leitura (2). Se o campo Apenas leitura não estiver disponível na lista de propriedades, clique em Exibir mais ao final da lista de propriedade para expandir os demais campos.

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

Figura 3.1 - Restringindo o campo para apenas leitura quando não estiver em modo de edição