Question

我需要允许用户只输入小数值。以下是输入字段的HTML代码。

<label for="conversion-factor">Conversion Factor:</label>
        <input type="text" class="form-control form-control-sm" id="conversion-factor" formControlName="conversionFactor" (keypress)="keyPressConversionFactor($event)">
        <div *ngIf="Conversion.controls['conversionFactor'].errors && Conversion.controls['conversionFactor'].touched" class="err-msg">
          Conversion Factor is required
        </div>

我的.ts文件已经实现了keyPressConversionFactor事件，如下所示

keyPressConversionFactor(event: any) {
const pattern = /^\d+(\.\d{1,2})?$/; // //[0 - 9] /;

let inputChar = String.fromCharCode(event.charCode);
if (event.keyCode != 8 && !pattern.test(inputChar)) {
  event.preventDefault();
}

使用这个，我让用户只输入数字。但我希望用户输入包含点的十进制数。上面的代码不允许输入点（＆＃34;。＆＃34;）

Answer 1

有两种限制输入的方法。无论是悲观还是乐观。

一个悲观的例子是不允许输入邮政编码或信用卡号码的任何字母（即每个输入的字符必须完全有效）。

最乐观的例子就像输入电子邮件一样，但在确认/限制之前等待电子邮件输入损失。有人可能希望先@.com键入电子邮件，然后返回添加me@.com，然后使用me@example.com结束。

你需要的是两者兼而有之。在用户输入时，请检查最严格的格式0.0但如果格式不匹配，请尝试0.然后.0查看它们是否匹配。如果他们这样做，你会乐观地认为用户尚未“完成”。然后，一旦输入失去焦点，请使用严格格式0.0进行测试。

Answer 2

您可以尝试按照RegEx：

此正则表达式允许您传递带有2个精度点的十进制数。

[0-9]+(\.[0-9][0-9]?)?

\d+(\.\d{1,2})?

限制在Angular中输入除十进制数之外的任何内容

2 个答案: