Text-mask: Unable to create a US phone number with extension

[ktriek]

Is it possible to make a part of the mask array optional, that would be so helpful.
This mask ['(', /[1-9]/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, /( x\d{1,6})/ ] is not working for US phone numbers with extension such as [phone] x123

[msafi]

@ktriek Thanks for this request!

You would need to use a mask function for that.

You would create a mask function that returns a phone number mask until the user has entered a complete phone number, then if the user enter's an x, the mask function would expand the mask to accept more characters.

I'm afraid there isn't another easier way :)

[fernandobandeira]

There's an example here:

phoneMask(userInput) {
    let numbers = userInput.match(/\d/g);
    let numberLength = 0;
    if (numbers) {
      numberLength = numbers.join("").length;
    }

    if (numberLength > 10) {
      return ['(', /[1-9]/, /[1-9]/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
    } else {
      return ['(', /[1-9]/, /[1-9]/, ')', ' ', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
    }
  }

Just change the if and the masks and you are good to go =) Then in your input:

[textMask]="{mask: phoneMask}"

[msafi]

Thanks @fernandobandeira!