Angular2 删除了 <input type="number"> 的无效输入? [英] Angular2 deletes invalid inputs for &lt;input type=&quot;number&quot;&gt;?

问题描述

看到这个plunkr:https://plnkr.co/edit/nGKAnXrrzgKSxpkdvEhX?p=preview

我在 Angular 中有一个简单的

显示 字段.

当我输入诸如123"之类的内容时，一切正常.

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

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

我怎样才能做到这一点?

解决方案

可以去掉type="number" 添加一个只允许数字和-的简单函数钥匙.




onlyNumberKey(event){让 charCode = (event.query) ?event.query : event.keyCode;控制台日志(字符代码)；如果 (charCode != 189 && charCode > 31&&(charCode <48 || charCode > 57))返回假；返回真；}

Plunker

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

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

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

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.

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.

How can I achieve that?

解决方案

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

Plunker

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