How to apply Dynamic Mascara in angular input?

Question

How to apply Dynamic Mascara in angular input?

Asked 5 years, 1 month ago

Viewed 3,390 times

1

I’m using Angular 8, example of mask would be landline and mobile phone.

That is to count the number of characters and apply such mask.

I am creating the mask with Ngx-Mask, trying with *ngIf in html, only it does not take the *ngIf condition, does not return error, only enters the 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>

If you are not error is because your ngIf condition is being evaluated as "false". changes to *ngIf="customer.phone; Else elseTemplate" or *ngIf="customer.phone?. length <= 10; Else elseTemplate" or *ngIf="1>0; Else elseTemplate" to find out which condition is returning false

– brenodiogo

2019/10/15 at 03:22
*ngIf="customer.phone false *ngIf="phone client?. length <= 10 true The two together never feels right. Any other hint?

– Pablo Ferreira

2019/10/15 at 04:43
does not work for material angular 9, it worked something else.

– Paulo Dantas

2020/02/25 at 04:15

2 answers

5

The ngx-Mask is working normally, it happens that if your phone contains space your length is counted with this space tbm, the correct is to leave the if greater or equal to 11 digits if the phone looks like this for example 11 1234-5678 pq, will count the 10 digits plus space, can see example working here.

<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>

I looked at your example and it’s like mine, does not apply the second mask if it is cellular: (00) 0 0000-0000. See that I want to apply mask if it’s landline or cell phone.

– Pablo Ferreira

2019/10/15 at 13:37
As it is the phone that you receive in your TS that the important that of the Html I already know, as that ta it?

– LeAndrade

2019/10/15 at 13:42
It’s kind of string, I don’t know if that’s exactly what you asked.

– Pablo Ferreira

2019/10/15 at 13:45
My . 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]
});

 my model public phone?: string

– Pablo Ferreira

2019/10/15 at 13:57
Pablo come on, I need to know what it’s worth to a phone that gets on your ts: (11) 12345678, if that’s the case 11 12345678, if that’s the case 1112345678. You can set an example for me to see?

– LeAndrade

2019/10/15 at 14:09
Oh yes, so I can receive either: 11999999999 (11 digits) or 1199999999 (10 digits).

– Pablo Ferreira

2019/10/15 at 14:14
Yes, that I did. What I want is to be dynamic understood. I have only 1 input, either for Landline or Mobile Phone. If typed 10 digits = (99) 9999-9999&#Typed 11 digits = (99) 9 9999-9999 !

– Pablo Ferreira

2019/10/15 at 14:42
Boy what you want has nothing to do with the code you posted that has an if to show the inputs according to the condition, but, blza I repeated the example there.

– LeAndrade

2019/10/15 at 15:06
I’m using reactive form, does it work too? Thank you very much.

– Pablo Ferreira

2019/10/15 at 15:33
Should probably work.

– LeAndrade

2019/10/15 at 16:56

Show 5 more comments

Browser other questions tagged angular mask

You are not signed in. Login or sign up in order to post.

by Eduardo Vargas • **3,413** points · Answer 1 · 2019-10-15T19:35:06+00:00

The most elegant way to do this is to change the value of Mask based on length without 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'
  }

})
}