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
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome
Propriedade
Função
Conteúdo
content
Define o rótulo.
Valor
ng-model
Propriedade AngularJS 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).
Mascara
mask
Propriedade de máscara aplicado ao campo de entrada de texto. Ver mais em Máscaras HTML.
Requerido
ng-required
Define que o campo é de preenchimento obrigatório.
Sugestão
placeholder
Exibe um exemplo de resposta para o usuário quando o campo está vazio.
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.
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente.
Exibir
ng-show
Propriedade AngularJS usada para exibir ou oculta o componente.
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.
Subcomponentes
O componente Entrada de texto com botão (web) é formado por três subcomponentes agrupados: label, input e botão. Ao clicar no botão bolha com ícone de cadeado (Figura 2) o componente é desbloqueado, permitindo a seleção de seus subcomponentes.
Dica
Consulte o tópico "Acesso aos subcomponentes" da documentação Componentes visuaispara mais informações.
Figura 2 - Desagrupar componente para acessar subcomponentes