Função
Formulário é um componente para cadastrar, editar e exibir dados. Esse componente é utilizado para cadastrar informações na grade, mas aqui vamos mostrar como utilizá-lo sozinho.
Animação 1 - Exemplo do componente rodando no browser
Principais propriedades
| Nome | Propriedade | Função |
|---|---|---|
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente. |
Fonte de dados | crn-datasource | Seleciona uma fonte de dados que já foi previamente criado no formulário. |
Repetir | ng-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Subcomponentes
O componente Formulário (web) é formado oito subcomponentes agrupados: seis botões e uma div. Cada um possui uma função que vem configurada no componente. Para selecionar um subcomponente basta clicar no que for desejado.
| Subcomponente | Tipo | Função |
|---|---|---|
| Inserir | Botão | Abre o modo de inserção de dados |
| Editar | Botão | Abre o modo de edição de um dado já existente |
| Anterior | Botão | Volta para o item anterior |
| Próximo | Botão | Vai para o próximo item |
| Excluir | Botão | Exclui dados existentes |
| Enviar | Botão | Envia o que foi feito no modo de inserção/edição |
| Cancelar | Botão | Cancela o modo de inserção/edição |
| Campos do formulário | Div | Espaço para adicionar campos do formulário. |
Como usar
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 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, adicione campos ao formulário. basta arrastar o componente desejado e soltar dentro da div (Figua 2) quando ela ficar com as arestas tracejadas. Para adiciona o próximo campoAdicione o próximo
Figura 2 - Adicionando campo
Configurar campo
Para que o item seja salvo, é necessário vincular a entrada de texto com um campo da fonte de dados. Para isso, selecione no componente Entrada de texto e, na aba Propriedades, no campo Valor clique no ícone de Editar Expressão para abrir a janela de configuração do conteúdo. Selecione a aba Campo de tela (3) e escolha em qual dos campos da fonte de dados (4) será salvo. Repita o procedimento para todos os campos do formulário.
Figura 4.1 - Vinculando campo da fonte a entrada de texto
Por fim, adicione 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. Para isso, selecione a entrada de texto, desagrupe-a e selecione apenas o input. Na aba de Propriedades do input, clique em Exibir mais para exibir todos os campos disponíveis e adicione na propriedade Apenas leitura o conteúdo !datasource.editing && !datasource.inserting. Repita o procedimento para todos os campos do formulário.
Figura 4.2 - Restringindo o campo para apenas leitura quando não estiver em modo de edição
Nome em inglês
Form
Nesta página
Compatibilidade
- Formulário web
Equivalente mobile
Formulário (mobile)
Botão do componente
Imagem no Editor Visual
