- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 18/05/2022
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 15 Próxima »
Função
O componente Caixa de checagem permite que o usuário escolha entre dois ou três estados para um item. Normalmente escolhas que são mutuamente exclusivas, por exemplo: definir um texto em “negrito” ou “não negrito”.
![](/download/attachments/172736597/checkboxBrowser.png?version=1&modificationDate=1660932212000&api=v2)
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
Título | content | Define o rótulo. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Valor inicial | ng-initial-value | Define o status inicial ao carregar o componente Caixa de checagem. Opções: Sim e Não. |
Cor da caixa de checagem | checkbox-theme | Altera a cor da caixa de checagem ativa. |
Permitir Valores Nulos | crn-allow-null-values | Permite que a caixa de seleção possa ter três status: True, False e Null (indefinido). |
Valor para falso | ng-false-value | Diretiva que específica o valor da expressão caso o componente não seja selecionado. |
Valor para verdadeiro | ng-true-value | Diretiva que específica o valor da expressão caso o componente seja selecionado. |
Requerido | ng-required | Define o preenchimento obrigatório pelo usuário. |
identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
Repetir | crn-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 | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Checkbox.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Caixa de checagem | Checkbox | Estiliza o componente. |
Permitir Valores Nulos
O componente Caixa de checagem pode possuir dois status (true e false) ou três (true, false e indeterminate). O valor indeterminado normalmente é utilizado para informar que o usuário ainda não definiu esse campo, salvando-o como nulo no banco de dados.
![](/download/attachments/172736597/checkboxStatus.png?version=1&modificationDate=1660932212000&api=v2)
Figura 2 - Os três valores da Caixa de checagem
Para permitir salvar o status Indeterminado no banco de dados, o campo da entidade no diagrama de dados deve estar configurado como Lógico (booleano) e a opção Não Nulo desmarcada.
Observação do componente
O componente Caixa de seleção possui uma característica própria, descrevemos abaixo.
Tempo de execução
Se colocarmos um evento que obtenha e imprima o status do checkbox ao clicar no componente, teremos a sensação de que algo está errado. Pois quando quando marcamos o checkbox, o status impresso no console é false e quando desmarcamos o componente, o true é exibido. Isso ocorre pois a chamada para o evento é mais rápida do que a alteração do status. Assim, ao clicar no checkbox desmarcado, o evento vai ler o seu status (false), imprimir o status obtido (false) e só depois será alterado para true.
Figura 3 - Retorno no console
Podemos comprovar isso adicionando o bloco Dormir com o valor de 1 milissegundo antes do bloco imprime. Nesse caso, ao clicar no checkbox desmarcado, o evento aguardará 1 milissegundo, tempo suficiente para o checkbox alterar seu status antes do console exibir o valor true.
Nome em inglês
Checkbox
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual
- Sem rótulos