Angular 2 validate input based on mask

Question

I'm using this plugin within my Angular 2 project to mask some inputs.

The problem I have with this is to validate if the input has the proper mask applied.

Whenever I try to check for the value it's alwayas valid. For example, I have a mask to fill a phone number, just like in the example:

@Component({
  template: `
    <input [textMask]="{mask: mask}" type="tel" formControlName="phone" />
  `
})

export class AppComponent {
  public myModel = ''
  public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
}

But even when I fill, let's say, 2 numbers (11_) ___-____ it's considering the field as valid.

I tried to se a custom Validator to check for the input length, but it's also passing, since it's being prefilled with _.

this.registerForm = this._fb.group({
    'phone': [null, Validators.compose([
        Validators.required,
        Validators.minLength(14),
        Validators.maxLength(14)
    ])],
});

I don't know how to create a validation for this type of scenario, envolving more complex validations.

you need to write a custom validation code to strip the masking characters and return true or false — Aravind
– Aravind, Commented Jul 1, 2017 at 19:10
The following should work as expected: Validators.pattern(/^$[1-9]\d{2}$\s\d{3}-\d{4}$/); Test. — developer033
– developer033, Commented Jul 1, 2017 at 19:23

Paulo Pedroso · Accepted Answer · 2019-07-26 17:17:03Z

1

Just registering the correct answer from @developer033. It worked like a charm for me.

The following should work as expected: Validators.pattern(/^([1-9]\d{2})\s\d{3}-\d{4}$/);

Although I used a pattern that fit my needs.

edited Jul 26, 2019 at 17:17

answered Jul 26, 2019 at 15:36

Paulo Pedroso

3,7352 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 validate input based on mask

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related