How can I automatically insert commas when a user inputs currency value in an Angular 7 reactive form, no [(ngModel)]

I have an input field where the user can input a numeric value. I need to automatically insert commas after every 3rd digit. When the user deletes numbers, the commas need to be in the correct places (after every 3rd digit, starting from the first number) as well as stay in place instead of relocating to the end of the input value. I cannot use ngModel, this is a reactive form.

I have tried this method in my TS file, to mask the user input

  maskInputAmount(e) {
    const t = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3}) 
    (\d{0,3})/);
    e.target.value = t[2] ? t[1] + ',' + t[2] + (t[3] ? ',' + t[3] : '') : 
    t[1];
  }

And in my HTML input field

<input (input)="maskInputAmount($event)" maxlength=11 
formControlName="businessNetWorth" id="businessNetWorth" 
type="text" class="form-control col-3 col-lg-12" data-hint="yes">

I am having commas come after every 3rd number. However, when deleting numbers from the end of the input, the commas at the front of the number should update correctly. For example, I enter '123,456,789'. When I delete the last two numbers I get '123,456,7' when it should be '1,234,567'.

One other issue, when a user deletes one of the first numbers, the comma in the input box automatically repositions itself to the end of the input value, I need it to stay in place. For example: '123,456,789'. I delete '3' and have '124,567,89' and the cursor is now behind the '9' when it should stay in front of the '2'.

How can I change my maskInputAmount(e) method to make this behave correctly?

Solution

Following code worked for me. (Assume present currency is in Indian rupees. If you want to have your own currency then you need to mention your country's code in code).

app.component.html

<input type="text" [formControl]="currency" (input)="changeToCurrency(currencyTextRef)" #currencyTextRef>
//sending reference of input element #currencyTextRef to function 

{{ currency.value }}

app.component.ts

currency = new FormControl();
temp;
currncyLength=0;

changeToCurrency(currencyTextRef) {
    this.currncyLength = this.currency.value.length;
    console.log("currency len is "+this.currncyLength);
    let index:number;
    // if(currencyTextRef.selectionStart || currencyTextRef.selectionStart == '0') {
    //     console.log("index isss  "+currencyTextRef.selectionStart);
        index = currencyTextRef.selectionStart; //getting caret(cursor) position 
    // }
    console.log("index is  "+index);

    // console.log("value is "+this.currency.value);

    let a = this.currency.value;
    a = a.replace(/,/g,'');
    let num:number = + a;
    let temp = new Intl.NumberFormat('en-IN').format(num); //inplace of en-IN you can mention your country's code
    // console.log("temp is   "+temp);
    this.currency.setValue(temp.toString());

    console.log("pressent len iss   "+this.currency.value.length)

    if(this.currncyLength<this.currency.value.length) {
        console.log("incoming to < ")
        index+=1;
        currencyTextRef.setSelectionRange(index,index);
    }
    else if(this.currncyLength >=this.currency.value.length) {
        console.log("incoming to >  ");
        // index-=1;
        currencyTextRef.setSelectionRange(index,index);
    }
    // else {
    //     currencyTextRef.setSelectionRange(index,index);
    // }

}

Following link might help. Intl number MDN