Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

Esse componente adiciona uma caixa de texto que aceita diversas linhas, bastante utilizado quando existe a necessidade de criar um texto longo, como comentário.


Image RemovedImage Added

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Nome

Propriedade

Função

Títulocontent
Título que será exibido acima do

Define o rótulo para o componente.

Sugestão

placeholder

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

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

Quantidade de

Linhas

linhas

rows

Define a

altura do campo de texto por número de linhas, caso o texto ultrapasse esse número, uma barra de rolagens é exibida

quantidade de linhas que serão visíveis antes de aparecer a barra de rolagem.

Máximo de caracteres

maxlength

Define a quantidade máxima de caracteres que o usuário pode inserir.

Redimensionável

resize

Define se o campo pode ser estendido: somente na vertical, somente na horizontal ou em ambas direções.

Texto quando requeridovalidationMessageExibe a mensagem informada ao tentar submeter o formulário com o campo vazio.
valor
A propriedade Requerido (ng-required) deve estar configurada com "sim". 
Desabilitadong-disabledDirectiva usada para desabilitar um componente quando a expressão vinculada for verdadeira.

Valor

ng-model

Propriedade Angular que pode ser usada para obter e alimentar

seu

o conteúdo pelo bloco de programação.

identificador
IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Estilostyle
Altera o estilo geral do
Atributo usado para estilizar o componente.
Exibirng-showPropriedade 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çacronapp-security
Abre
Propriedade que apresenta a
janela de
seleção dos grupos com permissões para visualização ou edição do componente.
Skincrn-skinPermite selecionar um skin que afetará apenas o componente selecionado.
Classes CSSclassAdiciona classes CSS que já foram criadas.

Propriedades

do subcomponente input

complementares

As propriedades abaixo não são nativas do componente. Para adicionar essas ou outras propriedades, será necessário selecionar o subcomponente input. textarea, desagrupando o componente principal. e inserindo, na propriedade Nova propriedade, uma das propriedades abaixo, como mostra a figura 2.

NomePropriedadeFunçã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í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.

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.EstilostyleAltera o estilo geral do input.Exibirng-showPropriedade Angular usada para mostrar ou oculta o componente.LinhasrowsDefine a altura do campo de texto por número de linhas, caso o texto ultrapasse esse número, uma barra de rolagens é exibida.RedimensionávelresizeDefine se o campo pode ser estendido: somente na vertical, somente na horizontal ou em ambas direções.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.Requeridong-requiredDefine que o campo é de preenchimento obrigatório.Segurançacronapp-securityAbre a janela de seleção dos grupos com permissões para visualização ou edição.SugestãoplaceholderExibe um exemplo de resposta para o usuário quando o campo está vazio.

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

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

exibidos ao utilizar a máscara CPF (2 "." e 1 "-"). Sendo necessário informar o valor 14 nessa propriedade.

Valor
Apenas leiturang-
modelPropriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.Classes CSSclassAdiciona classes CSS que já foram criadas
readonly

Bloqueia edições no campo e exibe seu conteúdo apenas para leitura. Por padrão, possui as opções "Sim" (true) e "Não" (false). 

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 Área de Textotexto com.

Nome em português

Nome em inglês

Descrição

Título

Title

Estiliza o título do componente.Entrada de texto

Área de Texto Geral

Input

Estiliza
a entrada de texto do
o conteúdo que será inserido no componente.

Sugestão

Placeholder

Estiliza a sugestão do componente.


Âncora
subcomponentes
subcomponentes

Subcomponentes

O componente Área de texto é formado por dois subcomponentes agrupados: labelinput. Ao  e textarea. Ao clicar no botão bolha com í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 anterior, 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.


Image RemovedImage Added

Figura 2 - Desagrupar componente para acessar seus subcomponentes

Nome em inglês

Textarea


Nessa página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário web


Equivalente mobile

Área de texto (mobile)


Botão do Componente

Imagem no Editor Visual