1

Estou utilizando o Angular 8, exemplo de mascara seria telefone fixo e celular.

Ou seja contar a quantidade de caracteres e aplicar tal mascara.

Estou criando a mascara com o Ngx-Mask, tentando com *ngIf no html, só que não pega a condição do *ngIf, não retorna erro, só entra no else "(00) 0 0000-0000".

 <div class="form-group col-md-2">
          <label for="telefone">Telefone</label>

          <ng-container *ngIf="cliente.telefone && cliente.telefone?.length <= 10; else elseTemplate">
            <input type="text" name="telefone" id="telefone" class="form-control" formControlName='telefone'
              mask="(00) 0000-0000">
          </ng-container>

          <ng-template #elseTemplate>
            <input type="text" name="telefone" id="telefone" class="form-control" formControlName='telefone'
              mask="(00) 0 0000-0000">
          </ng-template>
 </div>
3
  • se não está apresentando erro é porque sua condição no ngIf está sendo avaliada como "false". muda para *ngIf="cliente.telefone; else elseTemplate" ou *ngIf="cliente.telefone?.length <= 10; else elseTemplate" ou *ngIf="1>0; else elseTemplate" para descobrir qual condição está retornando false
    – brenodiogo
    15/10/2019 às 3:22
  • *ngIf="cliente.telefone false *ngIf="cliente.telefone?.length <= 10 true Os dois juntos nunca da certo. Alguma outra dica? 15/10/2019 às 4:43
  • não funciona para o angular material 9, funcionou outra coisa. 25/02/2020 às 4:15

2 Respostas 2

5

O ngx-mask está funcionando normalmente, acontece que se o telefone conter espaço o seu length é contado com este espaço tbm, o correto é deixar o if maior ou igual a 11 dígitos se o telefone for assim por exemplo 11 1234-5678 pq, vai contar os 10 dígitos mais o espaço, pode ver o exemplo funcionando aqui.

<ng-container *ngIf="cliente.telefone && cliente.telefone?.length <= 11; else elseTemplate">
   <input type="text" name="telefone" id="telefone" 
    class="form-control" formControlName='telefone' mask="(00) 0000-0000">
</ng-container>
10
  • Olhei seu exemplo e está igual o meu, não aplica a segunda mascara caso for celular: (00) 0 0000-0000. Viu que quero aplicar mascara se for telefone fixo ou celular. 15/10/2019 às 13:37
  • Como é o telefone que vc recebe no seu TS isso que o importante o do Html eu já sei, como que ta ele?
    – LeAndrade
    15/10/2019 às 13:42
  • É do tipo string, não sei se é exatamente o que perguntou. 15/10/2019 às 13:45
  • Meu .ts ` private buiderClienteForm() { if (this.acaoAtual === 'new') { this.clienteForm = this.formBuilder.group({ nome: [null, [Validators.required, Validators.minLength(2)]], ativo: new FormControl(true), telefone: [null] }); ` meu model public telefone?: string 15/10/2019 às 13:57
  • Pablo vamo lá, eu preciso saber como é o valor de um telefone que recebe no seu ts: (11) 12345678, se é assim 11 12345678, se é assim 1112345678. Pode colocar um exemplo para mim ver?
    – LeAndrade
    15/10/2019 às 14:09
3

O jeito mais elegante de fzer isso é alterar o valor da mask baseado no length sem necessidade do ngIf

<input type="text" name="telefone" id="telefone" class="form-control" formControlName='telefone'
              [mask]="telMask">

ts:

telMask= '(00) 0000-0000' //comece com a que faz sentido

ngOnInit(){
  //inicializa seu form e outros codigos...
  this.seuForm.get('telefone').valueChanges.map(valor=>valor.length).subscribe(length=>{
  if(length>10){
     this.telMask='(00) 0 0000-0000'
   }else{
     this.telMask= '(00) 0000-0000'
  }

})
}
1
  • Eduardo tentei seu exemplo e encapsulei o map Só que não consigo digitar mais que 10 caracteres no input assim, sempre entra no else Tem alguma solução? 15/10/2019 às 23:11

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 .