Angular 2：在ngModel输入上使用“number”管道进行游标问题

发布时间：2020-12-17 10:24:16 所属栏目：安全来源：网络整理

导读：我有一个输入,我希望像货币一样显示.我想只允许两个小数位,并且只允许数字,同时在必要时自动添加逗号.基本上,如果用户键入“12345”,我希望输入自动显示为“12,345.00”. “12,345”也可以接受,但如果输入“12345.5”则需要显示为“12,345.50”.我正在尝试使

我有一个输入,我希望像货币一样显示.我想只允许两个小数位,并且只允许数字,同时在必要时自动添加逗号.基本上,如果用户键入“12345”,我希望输入自动显示为“12,345.00”. “12,345”也可以接受,但如果输入“12345.5”则需要显示为“12,345.50”.我正在尝试使用管道来实现这一点,并决定使用“数字”管道,因为我不想显示货币符号(我在输入之前已经有一个美元符号作为标签).

这是我的代码：

<input [ngModel]="Amount | number: '1.2-2'" (ngModelChange)="updateAmount($event)" class="form-control" id="Amount" name="Amount" tabindex="4" type="number" autocomplete="off">

我遇到了一些问题.

>当我输入一个数字时,它会自动添加一个小数,并在末尾添加两个0,这很好,但它也将光标添加到最后,所以如果我输入“55”,而不是显示为“55.00” “,它显示为”5.01“(我假设它将其解释为5.005,然后将其舍入为5.01).如何防止光标到达最后,以便用户可以在看到预期结果时自然键入？
>此过滤器实际上并不将输入限制为2位小数.如果我输入“1234”,它将显示为“1.00234”.它还允许我添加多个小数点.如何将其限制为一个小数点,后面只有2位数？
>输入错误很容易打破这个管道.例如,如果用户输入一个字母,我将在控制台中收到一个错误,例如：

Invalid argument ‘11.00a’ for pipe ‘DecimalPipe’

出现此错误后,过滤器将完全停止工作.

如果我将输入设置为type =“number”并输入1234,则值为1,234,但输入将消失,我将在控制台中收到以下消息：

The specified value “1,234” is not a valid number. The value must match to the following regular expression: -?(d+|d+.d+|.d+)([eE][-+]?d+)?

使用JQuery Inputmask在限制/显示输入方面给出了我想要的结果,但它打破了我的ngModel并将值设置为空,因此除非有人知道解决方法,否则这不是我的选择.

我可以对我的管道进行更改以获得我想要的结果吗？我怎样才能让它发挥作用？

以下是上述用于屏蔽输入的灵感指令：
https://plnkr.co/edit/aBvO2F?p=preview

import { Directive } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({
  selector: '[ngModel][decimal]',host: {
    '(ngModelChange)': 'onInputChange($event)'
  }
})
export class DecimalMask {
  constructor(public model: NgControl) {}

  onInputChange(event,backspace) {
    var valArray = event.toString().split('.') : [];
    for(var i = 0; i < valArray.length; ++i) {
      valArray[i] = valArray[i].replace(/D/g,'');
    }

    var newVal: number;

    if(valArray.length === 0) {
      newVal = '';
    }
    else {
      let matches = valArray[0].match(/[0-9]{3}/mig);

      if(matches !== null && valArray[0].length > 3) {
        let commaGroups = Array.from(Array.from(valArray[0]).reverse().join('').match(/[0-9]{3}/mig).join()).reverse().join('');
        let replacement = valArray[0].replace(commaGroups.replace(/D/g,''),'');

        newVal = (replacement.length > 0 ? replacement + "," : "") + commaGroups;
      } else {
        newVal = valArray[0];
      }

      if(valArray.length > 1) {
        newVal += "." + valArray[1].substring(0,2);
      }
    }
    // set the new value
    this.model.valueAccessor.writeValue(newVal);
  }
}

输入元素如下：

<input decimal [(ngModel)]="Amount"
    class="form-control" id="Amount" name="Amount" tabindex="4" autocomplete="off">

如果最后一个字符是alpha或长度超过小数,请检查保护> 2：

ngDoCheck() {
    console.log(this.Amount);
    if(this.Amount) {
      this.Amount = this.Amount.replace(/[A-Za-z]/g,'');
      if(this.Amount.indexOf('.') !== -1) {
        var arrayVals = this.Amount.split('.');
        this.Amount = arrayVals[0] + "." + arrayVals[1].slice(0,2);
      }
    }
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!