Função

O componente é muito similar ao entrada de texto, porém possui o subcomponente Botão e é utilizado quando se quer obter dados de entrada e executar uma ação em seguida. Por padrão o componente é iniciado com configurações básicas, mas são facilmente alteradas pelo menu de propriedades do componente.


Figura 1 - Exemplo de imagem do componente executando no browser


Um exemplo de uso desse componente seria em um cenário onde se deseja, ao clicar no botão, realizar alguma ação com os valores inseridos no campo de texto.

Principais propriedades

Nome

Propriedade

Função

Título

content

Define o rótulo.

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.

ÍconeclassAbre a janela de seleção de ícones.

Máscara

mask

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

Desabilitadong-disabledDirectiva usada para desabilitar um componente quando a expressão vinculada for verdadeira.

Sugestão

placeholder

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

Valorng-modelPropriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.
Requeridong-requiredDefine que o campo é de preenchimento obrigatório.

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.
Classe CSSckass

Adiciona classes CSS já 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.

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 uma 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 com botão.

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

Título

Title

Estiliza o título do componente.

Entrada de texto

Input

Estiliza entrada de texto do componente.

Sugestão

Placeholder

Estiliza a sugestão do componente.

Botão

Button

Estiliza o botão do componente.

Subcomponentes

O componente Entrada de texto com botão (web) é formado por três subcomponentes agrupados: labelinput e button. Ao clicar no ícone de cadeado, na barra de opções (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).

Dica

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


Figura 2 - Desagrupar componente para acessar subcomponentes

Nome em inglês

Input with button


Nesta página


Compatibilidade

  • Formulário web


Equivalente mobile

Entrada de Texto com Botão (mobile)


Botão do Componente


Imagem no Editor Visual