Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: DI-2804

Função

O componente Entrada de texto é utilizado quando se quer obter dados de entrada do usuário. Por padrão o componente é iniciado com configurações básicas, mas são facilmente alteradas através do menu de propriedades do componente.


Figura 1 - Exemplo de imagem do componente executando 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.

Tipo

type

Propriedade usada para definir o tipo de entrada dos dados, exemplo: como data, moeda, e-mail e , entre outros. (valor padrão: text)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.

Máscara

mask

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

Sugestão

placeholder

Exibe um exemplo de resposta para o usuário quando o campo está vazio.

Requeridong-requiredDefine que o campo é de preenchimento obrigatório.
Texto quando requeridovalidationMessageExibe a mensagem informada ao tentar submeter o formulário com o campo vazio. A propriedade Requerido (ng-required) deve estar configurada com "sim". 

Máscara de Sugestão 

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.

Valorng-modelPropriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.

Identificador

id

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

EstilostyleAltera o estilo geral do componente da forma inline.

Exibir

ng-show

Propriedade Angular usada para mostrar ou oculta o componente.

Repetircrn-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 de selecionados.

Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.
Classes CSSclassAdiciona classes CSS que já foram criadas.

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

NomePropriedadeFunção
Tamanho máximomaxlength

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ínimominlength

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 leiturang-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 Estilos

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

Nome em portuguêsNome em inglêsDescrição

Título

Title

Estiliza o título do componente.

Entrada de texto

Input

Estiliza a entrada de texto do componente.

Sugestão

Placeholder

Estiliza a sugestão do componente.

Âncora
subcomponentes
subcomponentes

Subcomponentes

O componente Entrada de texto é formado por dois subcomponentes agrupados: label e input. Ao clicar no botão bolha com ícone de cadeado (Figura 2) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Para inserir uma das propriedades mostradas na tabela de subcomponente, acesse a propriedade Nova propriedade (destaque 1 da figura 2).

Informações
titleDica

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


Figura 2 - Desagrupar componente para acessar subcomponentes

 

Âncora
tipo
tipo

Tipos

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 Senha (2) e Cor (3).


Figura 3 - Selecionando tipos


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 uma senha e o segundo uma cor RGB (Figura 3.1).


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

Input


Nesta página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário web


Equivalente mobile

Entrada de Texto (mobile)


Botão do Componente


Imagem no Editor Visual