0

Estou trabalhando em um Input que precisa ter uma mensagem :

Digite pelo menos 10 caracteres

essa mensagem deve mudar a cada carácter que é digitado

Entao, ao digitar:

Alex

a mensagem deveria ser:

Digite pelo menos mais 6 caracteres

o meu problema é como conseguir o tamanho da string:

<input
type="text"
formControlName="nome" 
class="form-control"
[ngClass]="{'is-invalid': submitted && nome.invalid && (nome.dirty || nome.touched), 'is-valid': (nome.valid && nome.touched ) }">

.

<div class="text-muted" *ngIf="nome?.value.length < 10 ">
digite pelo menos mais {{10 - nome?.value.length }} caracteres </div>

Mas ao iniciar o "nome" esta undefined, e isso quebra a aplicação,

alguma sugestão?

2 Respostas 2

2

Um ajuste simples seria, criar um get pro seu form

get formControl() { return this.form.controls; }

no html:

formControl.nome.length < 10

mas o correto não seria fazer assim, o correto fazer é criar um validator, crie um arquivo ts ou uma função

function minCaracterValue(control: AbstractControl): { [key: string]: boolean } | null {
   if (control.value && (isNaN(control.value) || control.value < 10) {
      return { 'minCaracter': true };
   }
   return null;
}

ou pode ser um metodo na classe também. O form ficaria assim

  this.form= new FormGroup({
       nome: new FormControl(null, [minCaracterValue])
    });

no seu template html ficaria assim

<p *ngIf="formControl.nome.errors.minCaracter">digite pelo menos mais {{10 - formControl.nome.value }} caracteres</p>
0

O erro pode ser corrigido pelo duplo uso do Operador Elvis

nome?.value.length

não funciona porque o value também é nulo,

deveria ser:

nome.value?.length

ou

nome?.value?.length

5
  • 1
    E como adicionou a palavra "mais"? Quando há algo digitado, de acordo com a pergunta, a frase precisa ser "pelo menos mais X caracteres". E se for digitado 12 caracteres aparecerá "pelo menos mais -2 caracteres"?
    – Woss
    1/10/2019 às 11:52
  • Ajustei a pergunta, agora a palavra 'mais' existe desde de começo. grato pela correção. 1/10/2019 às 11:54
  • 2
    Ué, ao invés de adaptar a solução você adapta o problema? haha xD
    – Woss
    1/10/2019 às 11:55
  • 1
    Usa o comando (input) na tag input para atualizar o valor. Ex: html5 <input type="text" formControlName="nome" class="form-control" (input)="contaCaracteres()" [ngClass]="{'is-invalid': submitted && nome.invalid && (nome.dirty || nome.touched), 'is-valid': (nome.valid && nome.touched ) }"> Ai no componente, dentro da função contaCaracteres(), tu pode fazer meuForm.get('nome').value.length e armazenar em outra variável o valor que retorna. É uma maneira de tu sempre contar os caracteres de uma string no input. 1/10/2019 às 12:03
  • 1
    Ou, como ta usando FormGroup, pode tentar usar o comando meuForm.get('nome').value.length na div que vai mostrar a mensagem 1/10/2019 às 12:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .