Angular2-text-Mask

Asked

Viewed 696 times

0

How to apply a phone mask where it adapts to a landline and mobile phone, using the Angular2-text-mask?

I read the documentation and saw that you can do with function, but as I am using formGroup, I don’t know how to take 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) ])
        });
    }

Masquerade...

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

javascript typescript angular

2 answers

1

//Oninit

this.myForm.controls['telefone'].valueChanges.subscribe(sualogicaaqui)

  • I tried to use this way but it did not work!! I entered the code of my attempt in the question, because here in the comments has character limit...

  • Eita o value changes e um observable que vc poe no onInit e acho que não é só mudar o valor da mascara! You have to remove Validator and add the right.

  • https://scotch.io/tutorials/how-to-implement-conditional-validation-in-angular-2-model-driven-forms

  • That way it didn’t roll either! : / I have to find a way to use 'Angular2-text-Mask'

0


Problem solved! I added a "#phone" to my HTML input, and 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/];
        }
    }

passing the "#telephone", in the function of the mask, I can pick up the value inside the field and realize the condition of formation of the mask.

Browser other questions tagged javascript typescript angular

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