Angular2删除<输入类型=“数字">的无效输入. [英] Angular2 deletes invalid inputs for <input type="number">?

问题描述

看到这个笨拙的人: https://plnkr.co/edit/nGKAnXrrzgKSxpkdvEhX?p=preview

See this plunkr: https://plnkr.co/edit/nGKAnXrrzgKSxpkdvEhX?p=preview

我在Angular中有一个简单的<form>，它显示一个<input type="number">字段.

I have a simple <form> in Angular that displays a <input type="number"> field.

当我输入"123"之类的东西时，一切正常.

When I enter something like "123" everything is ok.

但是输入"123-456"似乎也可以，尽管这不是一个真实"数字.我发现Angular将myNumber.value设置为null，所以一切似乎都没问题.

But the input "123-456" seems to be ok, too, although this is not a "real" number. I found out that Angular sets the myNumber.value to null and so everything seems to be ok.

我要实现的是Angular不会将输入"123-456"重置为null，而是告诉我输入无效.

What I want to achieve is that Angular doesn't reset the input "123-456" to null and instead tells me that the input is invalid.

我该如何实现?

推荐答案

您可以删除type="number"添加一个简单的功能，该功能仅允许数字和-键.

You can remove the type="number" add a simple function that allows only numbers and - key.

<input formControlName="myNumber" #myNumber (keydown)=onlyNumberKey($event)><br>

onlyNumberKey(event){
        let charCode = (event.query) ? event.query : event.keyCode;
        console.log(charCode);
            if (charCode != 189 && charCode > 31
                && (charCode < 48 || charCode > 57))
                return false;
            return true;
    }

柱塞

这篇关于Angular2删除<输入类型=“数字">的无效输入.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！