Angular2-text-mask

Navigation
0

How to apply a phone mask where it suits a landline and cell phone using Angular2-text-mask ?

I have read the documentation and I have seen what it's supposed to do with a function, but since I'm using formGroup , I do not know how to get the value of my field ... 

    // Mascaras
    cpfMask = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
    cepMask = [/\d/, /\d/, /\d/, /\d/ , /\d/, '-', /\d/, /\d/, /\d/];
   
    
    constructor(fb: FormBuilder, public router: Router, private vwServicePagination: VwServicePagination){
        //Grupo de formulario - Validações
        this.myForm = fb.group({
            nome: new FormControl('', [ Validators.required, Validators.minLength(2), this.validaNome ]),
            email: new FormControl('', [ Validators.required, Validators.pattern(this.validaEmail) ]),
            cpf: new FormControl('', [ Validators.required, this.validaCpf ]),
            telefone: new FormControl('', [ Validators.required ]),
            cep: new FormControl('', [ Validators.required, Validators.pattern(this.validaCep) ])
        });
    }

Masking Attempt ... 

 
    // Mascaras
    cpfMask = [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
    cepMask = [/\d/, /\d/, /\d/, /\d/ , /\d/, '-', /\d/, /\d/, /\d/];
    telefoneMask = function(){
        if(this.myForm.controls.telefone.value.length === 9){
            [/\d/, /\d/, /\d/, /\d/ , /\d/, '-', /\d/, /\d/, /\d/, /\d/];
        }else{
            [/\d/, /\d/, /\d/, /\d/ , '-', /\d/, /\d/, /\d/, /\d/, /\d/];
        }
    }

    constructor(fb: FormBuilder, public router: Router, private vwServicePagination: VwServicePagination){
        //Grupo de formulario - Validações
        this.myForm = fb.group({
            nome: new FormControl('', [ Validators.required, Validators.minLength(2), this.validaNome ]),
            email: new FormControl('', [ Validators.required, Validators.pattern(this.validaEmail) ]),
            cpf: new FormControl('', [ Validators.required, this.validaCpf ]),
            telefone: new FormControl('', [ Validators.required ]),
            cep: new FormControl('', [ Validators.required, Validators.pattern(this.validaCep) ])
        });
    }
    
asked by anonymous 13.04.2018 / 03:45

2 answers

0

Problem solved! I added a "#phonephone" in the input of my HTML, and I put the mask as follows: 

 telefoneMask = function(telefone: any) {
        if(telefone.length == 10){
            return [/\d/, /\d/, /\d/, /\d/ , /\d/, '-', /\d/, /\d/, /\d/, /\d/];
        }else{
            return [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, /\d/];
        }
    }

By passing the "#telephone", in the mask function, I can get the value inside the field and perform the masking condition.

    
16.04.2018 / 13:59
1

// OnInit 

this.myForm.controls['telefone'].valueChanges.subscribe(sualogicaaqui)
    
13.04.2018 / 13:02
Return value with XMLHttpRequest description call (HOVER)