Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O componente Entrada de texto é utilizado quando se quer obter dados de entrada. Por padrão o componente é iniciado com configurações básicas que são facilmente acessadas pelo menu de propriedades do componente.
Image Removed
Image Added
Figura 1 - Exemplo do componente rodando no simulador
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|
Valor
ng-model
Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.
Tipo
type
Propriedade usada para definir o tipo de entrada, exemplo: data, financeiro, e-mail e outros. (valor padrão: text).
Sugestão
placeholder
Exibe um exemplo de resposta para o usuário quando o campo está vazio.
Máscara
Sugestão de Máscara
mask-placeholder
Exibe um exemplo de resposta no momento que o usuário insere os dados, os caracteres são substituídos à medida que o usuário digita.
Essa propriedade só deve ser utilizada em campos do tipo texto usando máscaras de CPF, CNPJ, telefone e outras.
Tipo de Teclado
keyboard
Específica qual será o tipo de teclado que será exibido ao usuário quando esse campo for utilizado.
Directiva que adiciona uma restrição em um campo de texto e uma validação em um formulário caso o número mínimo de caracteres não seja atingido.
Directiva que adiciona uma restrição em um campo de texto e uma validação em um formulário caso ultrapasse o número máximo de caracteres.
Propriedade de máscara aplicado ao campo de entrada de texto. Ver mais em Formatação de máscaras na camada cliente.
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 |
Define o estilo do componente. | ||
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 | 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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Principais propriedades do subcomponente subcomponente input
Nome | Propriedade | Função |
---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Desabilitado |
disabled | Valor booleano, sim ou não, que habilita ou desabilita o componente, por padrão o componente vem habilitado. | |
Desabilitar se | ng-disabled | Directiva usada para desabilitar um componente quando a expressão vinculada for verdadeira. |
Estilo | style |
Define o estilo do componente. | ||
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
Máscara | mask | Propriedade de máscara aplicado ao campo de entrada de texto. Ver mais em Formatação de máscaras na camada cliente. |
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. |
Requerido | ng-required | Define se o campo é de preenchimento obrigatório ou não. |
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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Sugestão | placeholder | Exibe um exemplo de resposta para o usuário quando o campo está vazio. |
Tipo | type | Propriedade usada para definir o tipo de entrada, exemplo: data, financeiro, e-mail e outros. (valor padrão: text). |
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 input |
Arial- |
label | arial- |
label | Atributo do tipo texto, ele especifica um texto para o componente atual. | |
Keyboard | keyboard | Específica qual será o tipo de teclado que será mostrado ao usuário quando esse campo for utilizado. |
Propriedades não nativas do subcomponente subcomponente input
As propriedades abaixo não são nativas do componente. Para adicionar essas ou outras propriedades, será necessário selecionar o subcomponente input, desagrupando o componente principalprincipal e inserindo, na propriedade Nova propriedade, uma das propriedades abaixo, como mostra a figura 2.
Nome | Propriedade | Função |
---|---|---|
Tamanho máximo |
maxlength | Define o número máximo de caracteres aceito no campo. Algumas máscaras possuem caracteres que ocupam espaços, dessa forma, ao informar o número máximo de caracteres nesta propriedade, leve em consideração a quantidade de caracteres utilizados pela máscara. |
Tamanho mínimo |
minlength | Define o número mínimo de caracteres aceito no campo. A linha do campo ficará em vermelho até que o usuário digite o mínimo de caracteres necessários. Algumas máscaras possuem caracteres que ocupam espaços, dessa forma, ao informar o número mínimo de caracteres nesta propriedade, leve em consideração a quantidade de caracteres utilizados pela máscara. | |
Apenas leitura | ng-readonly | Bloqueia edições no campo e exibe seu conteúdo apenas para leitura. Por padrão, possui as opções "Sim" e "Não". Essa propriedade também aceita expressões, permitindo por exemplo, bloquear um campo vinculado a um fonte de dados:
|
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Entrada de texto
Nome em português | Nome em inglês | Descrição |
---|---|---|
Entrada de texto | Input | Estiliza a entrada de texto do componente. |
Sugestão | Placeholder | Estiliza a sugestão de escrita do componente. |
Âncora subcomponentes subcomponentes
Subcomponentes
O componente Entrada de texto é formado por um subcomponentes agrupado: input. Ao clicar no ícone de cadeado da barra de opções (Figura 2), o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Para inserir uma das propriedades mostradas na tabela acima, acesse a propriedade Nova propriedade (destaque 1 da Figura 2).
Informações | ||
---|---|---|
| ||
Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuais para mais informações. |
Image Removed
Image Added
Figura 2 - Desagrupar componente para acessar seus subcomponentes
Nome em inglês
Text Input
Nessa página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Image Removed
Image Added
Imagem no Editor Visual
![](/download/attachments/172736307/EntradaDeTextoMobileEditorVisual.png?version=1&modificationDate=1683308697000&api=v2)