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.


Figura 1 - Exemplo do componente rodando no simulador


Principais propriedades

Aba propriedade

Na tabela abaixo estão descritas as principais propriedades do componente Entrada de Texto.

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 dos dados, como data, moeda, e-mail, entre outros. O tipo padrão é 'Texto'. Algumas dessas opções influenciam a forma como o componente será exibido. O tratamento de máscaras não deve ser feito nesse campo. Embora seja possível escrever no campo, o usuário deve se limitar a selecionar uma das opções disponíveis na lista específica do campo. Confira mais detalhes no tópico Tipo.

Sugestão

placeholder

Atributo do tipo texto, ele especifica uma dica sobre o conteúdo que deve ser inserido no componente.

Máscara

mask

Propriedade de máscara aplicada ao campo de entrada de texto. Ver mais em Máscaras HTML.

Sugestão de Máscara

mask-placeholder

Especifica uma breve dica que descreve o valor esperado no campo.

Tipo de Teclado

keyboard

Específica qual será o tipo de teclado que será mostrado ao usuário quando esse campo for utilizado.

Tamanho mínimong-minlength

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


Máximo de caracteresng-maxlength

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

Identificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

EstilostyleDefine o estilo do componente.

Exibir

ng-show

Propriedade Angular usada para mostrar ou oculta o componente.

Repetir crn-repeatPropriedade 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.

Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.
Classes CSSclass

Adiciona classes CSS que já foram criadas.

Principais propriedades do subcomponente input

Nome

Propriedade

Função

IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
DesabilitadodisabledValor booleano, sim ou não, que habilita ou desabilita o componente, por padrão o componente vem habilitado.
Desabilitar seng-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-repeatPropriedade 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.

Skincrn-skinPermite 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 inicialng-initial-valueDefine o status inicial ao carregar o componente input
Arial-labelarial-labelAtributo 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 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 principal 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.
Ex,: Um CPF possui 11 dígitos, porém mais 3 caracteres são exibidos ao utilizar a máscara CPF (2 "." e 1 "-"). Sendo necessário informar o valor 14 nessa propriedade.

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.
Ex,: Um CPF possui 11 dígitos, porém mais 3 caracteres são exibidos ao utilizar a máscara CPF (2 "." e 1 "-"). Sendo necessário informar o valor 14 nessa propriedade.

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:

  • "datasource.editing" para bloquear o campo quando a fonte de dados estiver em modo de edição ou
  • "datasource.editing || datasource.inserting" para bloquear o campo quando a fonte de dados estiver em modo de edição ou inserção.

  

Aba de Eventos

Na tabela abaixo estão descritos os tipos de eventos disponíveis para o componente Entrada de texto.

Nome

Propriedade

Função

Apertar Teclang-keydown

Executa uma ação assim que uma tecla é acionada no teclado.

Ao Soltar Teclang-keyup

Executa uma ação ao soltar uma tecla do teclado.

Ao Focarng-focus

Executa uma ação assim que o componente é focado.

Ao Sair do Focong-blur

Executa uma ação assim que o componente sai do foco.

Ao Pressionaron-hold

Executa uma ação sempre que um elemento é pressionado sem soltar por alguns milissegundos.

Ao Deslizaron-swipe

Executa uma ação sempre que é feito uma ação de swipe no elemento.

Ao Arrastaron-drag

Executa uma ação sempre que um elemento é arrastado.


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.

Subcomponentes

O componente Entrada de texto é formado por um subcomponentes agrupado: input. Ao clicar no ícone de cadeado da barra de opções (destaque 1 da  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 2 da Figura 2).


Dica

Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuais para mais informações.


Figura 2 - Desagrupar componente para acessar seus subcomponentes

Tipo

No parâmetro Tipo (Destaque 1 da figura 3) é possível determinar o tipo de informação que o componente Entrada de texto irá receber, como mostrado na figura 3, arrastamos 2 componentes Entrada de texto e em cada um selecionamos um tipo diferente, são eles Moeda (2) e Data (3).


Figura 3 - Selecionando tipos


Como dito anteriormente na tabela de propriedades, apesar de ser possível escrever sobre o campo, o usuário deve se limitar a escolher uma das opções disponibilizadas pela propriedade Tipo.


Após executarmos o projeto e acessarmos a view, verificamos que os 2 componentes Entrada de texto inseridos anteriormente na figura 3, estão recebendo tipos de informações diferentes, o primeiro recebe um campo do tipo "Moeda" e o segundo recebe um campo do tipo "Data". 


Figura 3.1 - Exemplos de tipos


Além dos tipos mostrados acima, também possuímos outros tipos, abaixo listaremos a funcionalidade de cada um:

  • Texto: recebe uma informação do tipo texto;
  • Número: aceita números com casas decimais;
  • Inteiro: recebe apenas números inteiros;
  • Moeda: recebe números inteiros e o separa com pontos a cada 3 dígitos, ex.: 1.000 (mil);
  • Decimal de moeda: recebe números e separa, além de pontos a cada 3 dígitos, também por vírgulas os números decimais, ex.: 1.000,50 (mil e cinquenta centavos);
  • Senha: recebe informações do tipo senha, escondendo com "*" o valor digitado;
  • Data: recebe informações do tipo Data sem hora;
  • Data e hora: recebe informações do tipo Data contendo a hora;
  • Data e hora local: recebe informações do tipo Data contendo a hora no fuso horario loca;
  • Cor: recebe cores do tipo RGB;
  • E-mail: recebe informações do tipo e-mail, contendo "email@email", caso não esteja desta forma, o campo ficará vermelho dando entender ao usuário que o valor digitado não é um e-mail;
  • Mês: recebe o nome do mês desejado;
  • Alcance: muda o formato para uma barra que informará o alcance de 0 a 100;
  • Pesquisa: recebe uma informação do tipo texto;
  • Telefone: recebe números de telefones já com a máscara (DDD) 00000-0000;
  • Hora: recebe informação no formato de horário, ex.: 05:17:13.
  • Hora local: recebe informação no formato de horário, ex.: 05:17:13 no fuso horario local;
  • Url: recebe informações do tipo Url no formato "http://exemplo.com/", caso não esteja desta forma, o campo ficará vermelho dando entender ao usuário que o valor digitado não é uma Url;
  • Semana: recebe o nome do dia na semana.

Nome em inglês

Text Input


Nessa página


Compatibilidade

  • Formulário mobile


Equivalente web

Entrada de Texto (web)


Botão do Componente


Imagem no Editor Visual