0

Como aplicar uma máscara de telefone aonde se adapte a um telefone fixo e celular, usando o Angular2-text-mask?

Li a documentação e vi que da pra fazer com função, porem como estou utilizando formGroup, não sei como pegar o valor do meu campo...

    // 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) ])
        });
    }

Tentativa de mascara...

 
    // 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) ])
        });
    }
    

2 Respostas 2

1

//OnInit

this.myForm.controls['telefone'].valueChanges.subscribe(sualogicaaqui)
4
  • Tentei usar dessa maneira porem não deu certo!! inseri o código da minha tentativa na pergunta, pois aqui nos comentários tem limite de caracteres... Commented 13/04/2018 às 13:20
  • Eita o value changes e um observable que vc poe no onInit e acho que não e so mudar o valor da mascara! Vc tem que remover o validator e adicionar o certo. Commented 13/04/2018 às 13:24
  • scotch.io/tutorials/… Commented 13/04/2018 às 13:26
  • Dessa forma também não rolou! :/ Tenho que achar um jeito de usar o 'Angular2-text-mask' Commented 13/04/2018 às 14:13
0

Problema resolvido! Adicionei um "#telefone" no input do meu HTML, e coloquei a mascara da seguinte forma:

 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/];
        }
    }

passando o "#telefone", na função da mascara, consigo pegar o valor dentro do campo e realizar a condição de formação da mascara.

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 .