Question

显然，某些浏览器允许用户在数字输入字段中输入字母（例如Mac上的Chrome 46.0.2490.80或Ubuntu上的Chrome 41.0.2272.89）。此外，所有浏览器都接受字符“e”，因为在某些特定条件下，它可以被视为有效数字。

现在，如果用户在该字段中输入任何字母，显然Angular无法更新模型。

你可以在这个小提琴中看到： http://jsfiddle.net/Y8Jg6/78/

<h1>Simple Data Binding with AngularJS</h1>
<br />
<div ng-app>
Name: <input type="number" ng-model="name" />
<br /><br />
   Welcome to AngularJS {{name}}
</div>

这是预期的行为吗？通过这种方式，有时候模型不会反映输入字段的值，并且可能导致意外错误（例如，我正在考虑字段验证）

Answer 1

如果您期望一个数字，那么该字段中的任何字母都会使模型值无效（除非您提到的是'e'）。 Angular 1.4.x使用此正则表达式来确定是否允许该数字：

var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))([eE][+-]?\d+)?\s*$/;

如您所见，“e”或“E”在这种情况下有效（但没有其他字母）。你的jsfiddle使用较旧版本的angular，其中'e'char似乎没有被正确解析，因此使模型无效。这是使用Angular 1.4.7的相同jsfiddle，它正确地解析数字（包含e或E的数字）。

您的应用程序可能会使用验证来确定模型是否已填充（如果它实际上是必填字段）。如果您确实希望在模型中允许非数字，请在输入上考虑不同的“类型”。

Answer 2

只有在输入数据有效且模型更新

时，才能按预期工作

您可以使用ngModelOptions覆盖此行为：{allowInvalid：true}（对输入类型=数字afaik不起作用）

docs：https://docs.angularjs.org/api/ng/directive/ngModelOptions

另见这个问题： How can I override Angular's filtering of invalid form values, forcing Angular to persist the $viewValue to $modelValue?

输入字母时，AngularJS输入类型编号不会更新模型

2 个答案: