Angular2 删除 <input type="number"> 的无效输入？答案

【问题标题】：Angular2 deletes invalid inputs for <input type="number">?Angular2 删除 <input type="number"> 的无效输入？
【发布时间】：2017-07-10 23:02:08
【问题描述】：

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

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

当我输入“123”之类的内容时，一切正常。

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

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

我怎样才能做到这一点？

【问题讨论】：

尝试在您的表单上设置一个 FormControlGroup，然后在输入上设置一个 FormControlName，如果插入的输入无效，它将显示错误。如果您不知道如何在 Angular 中使用 FormControls，请告诉我。
我想我已经使用了 [formGroup] 和 [formControlName] 指令。

标签： angular angular2-forms

【解决方案1】：

你可以去掉type="number"添加一个简单的函数，只允许数字和-键。

<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

【讨论】：