Question

我必须在Angular中创建输入字段，该输入字段只允许使用2个小数位的数字，例如'123455.12'

以下是我到目前为止尝试过的

<input myCustomDirective type="text">

我创建了指令。在我的CustomDirective中，我使用HostListener进行按键事件，在该侦听器中，我使用正则表达式进行验证，但只允许输入数字，不允许输入'。（。）'

new RegExp('^[0-9]*$'); //我的正则表达式

Answer 1

这是一个仅接受带有自定义项的十进制值的指令精度。

https://stackblitz.com/edit/angular-decimal-directive

它将允许您将数字放在。（点）之前
不允许粘贴（ctrl + v）非十进制。
只需要一个。（。）。默认情况下，它将在后面加2位数字。（点）。

示例：

print_r

但是您可以这样定义精度大小：-

`<input type="text" [(ngModel)]="myVar" decimal>`

如果要使用“仅整数而不是浮点数”，可以使用如下指令：

`<input type="text" [(ngModel)]="myVar" [decimal]="3">`
如果您在输入中没有完成足够的精度，则它将自动完成其余的数字精度（如果还有。（点）需要）通过onblur事件。
您无法通过两种方式注入字符串值。

注：[（ngModel）]是使用该指令所必需的。

Answer 2

请查看链接中发布的小提琴jsfiddle.net/gsferreira/Lsv9f0b0， ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/"是关键

来自Plain Old Java脚本小提琴链接https://jsfiddle.net/j3cbytws/

请只输入数字，并允许使用单点，

<input type="number" name="someid" onkeypress="return isNumberKey(event)" /> 

<script>
var isDecimalAlredyEcountered = false;
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if(isDecimalAlredyEcountered && charCode === 46)
    return false;
   if(charCode == 46)
    {isDecimalAlredyEcountered =true;
    }
    if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 46)
        return false;
    return true;
}    
</script>

上述实现可能会出现退格字符和删除问题，因此您必须在清除状态下重置状态

Answer 3

您要求的

ng模式是ng-pattern=" /^[.\d]+$/"

Angular6-自定义输入字段

3 个答案: