当用户以 Angular 7 反应形式输入货币值时，如何自动插入逗号，没有 [(ngModel)]

Question

我有一个输入字段，用户可以在其中输入数值。我需要在每第 3 个数字后自动插入逗号。当用户删除数字时，逗号需要位于正确的位置（从第一个数字开始，每第 3 个数字之后）并留在原地，而不是重新定位到输入值的末尾。我不能使用 ngModel，这是一种反应形式。

我已经在我的 TS 文件中尝试过这种方法来屏蔽用户输入

  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];
  }

然后在我的 HTML 输入字段中

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

我在每 3 个数字后面加上逗号。但是，从输入末尾删除数字时，数字前面的逗号应该正确更新。例如，我输入“123,456,789”。当我删除最后两个数字时，我得到了“123,456,7”，而它应该是“1,234,567”。

另一个问题，当用户删除第一个数字时，输入框中的逗号会自动重新定位到输入值的末尾，我需要它留在原位。例如：“123,456,789”。我删除了“3”，得到了“124,567,89”，光标现在位于“9”的后面，而它应该位于“2”的前面。

如何更改我的 maskInputAmount(e) 方法以使其正常运行？

Answer 1

以下代码对我有用。（假设当前货币为印度卢比。如果您想拥有自己的货币，则需要在代码中提及您所在国家/地区的代码）。

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);
    // }

}

关注 link 可能会有帮助。 Intl number MDN

当用户以 Angular 7 反应形式输入货币值时，如何自动插入逗号，没有 [(ngModel)]

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

html

currency

input

angular7