Doubts of Angular masks

Asked

Viewed 699 times

1

Hi, I’m new to Angular and I’m having trouble with my mask! I’m wearing the masks of "Angular-input-Mask";

I have a form that has a field 'CPF', the mask is applied perfectly. Visually when I type a letter, this letter does not appear in the field, because the field 'CPF' accepts only numbers! However when I type a letter, this letter is stored with input, and my formGroup validation is activated automatically. I’d like to know how to prevent that!

In the photo below, I displayed the value of my form and fields and typed a letter. Note that the 'CPF' field is empty, but the input value is filled with the typed letter..

inserir a descrição da imagem aqui

Form code...

inserir a descrição da imagem aqui

typescript angular

  • put the code!

  • Form code posted

  • 1

    tentat put a type="number"

  • and take off the ng model

  • Then, type="number", cannot be, because if not the mask will not be applied, because it has ".. -", dots and dash.. And ngModel is the application of the mask tbm, if you take the mask to work...

  • The problem is that you are mixing the reactive Forms(formControlName) with the Forms(ngmodel) template. recommend you make your own mask just look for the regex of Cpf.

  • Got it! but how do I make this mask own? Using Jquery? Because I was using Jquery and was giving the same error, so I decided to change!! Does regex make mascara? until then I can use only for validation...

  • take a look at that answer, you create your directive of Cpf https://stackoverflow.com/questions/37800841/input-mask-fields-in-angular2-forms

  • vc tbm can look for a library that works with formcontrolname

  • https://github.com/text-mask/text-mask/tree/master/angular2#readme

  • Opah, I found the same that you posted, I will do the tests here and I warn you to mark the answer here! thank you very much..

  • Opah, it worked 100%, can post the link as an answer I confirm here! thank you...

Show 7 more comments

1 answer

2


Summarizing the problem was that you were mixing the reactive Forms(formControlName) with the Forms(ngmodel) template. In this case either you create your own mask or look for another library that works with the reactive Forms.

In this case you only need to search the regex of Cpf and apply to the element.

Browser other questions tagged typescript angular

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