Thousands separator with Input mask

Question

I'm going to use this mask with Ionic 3 app. I have setup the project for this.

.ts

 this.masks = {
      budget: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
    }

.html

   <ion-input type="number" [(ngModel)]="project.budget" [textMask]="{mask: 
 masks.budget}"></ion-input>

Q: Above mask is just a phone number one.Can you tell me how to do thousand separated input mask here?

Hope I can use below reg ex-pattern .But how can I apply it to a masks array?

^\d+|\d{1,3}(?:[,.]\d{3})*$

budget values are numeric .No decimals.eg 100,000 , 25,000 like that.

Answer 1

We can easily do this task by using createNumberMask addon.

.ts

  const numberMask = createNumberMask({
      prefix: '',
      thousandsSeparatorSymbol: ','
    })
    this.masks = {
      budget: numberMask,
    }