如果用户输入 "five hundreds"，"input type=number" 如何显示错误消息

Question

如果用户没有在字段中键入数字（例如 "five hundred" 或“9987-”），angular 不会将其作为错误处理，并且不会显示任何错误（本例中 ng-class 未更改）。

<div class="form-group"
     ng-class="{ 'has-error' : submitted && form.price.$error.pattern }">
        <input name="price" id="price" type="number"
               ng-model="formOb.price"
               ng-pattern="/^[0-9]+([\.|,][0-9]+)?$/"
                />

有办法处理吗？如何将 class 更改为 'has-error' ？（如果可以的话不直接用javascript就更好了）

Answer 1

ng-pattern 仅在您将 html 标签与名称绑定时才有效。只需要 name 属性就可以让你举个例子运行.

查看此 link 了解更多详情： Angularjs Forms

Answer 2

将类型设置为 "text" - Angular 将通过 ng-pattern 捕捉到它 - 如果你使用 type="number"，那么某些浏览器甚至可能不会传递要使用您的模式进行检查的输入值。

<div class="form-group"
     ng-class="{ 'has-error' : submitted && form.price.$error.pattern }">
        <input name="price" id="price" type="text"
               ng-model="formOb.price"
               ng-pattern="/^[0-9]+([\.|,][0-9]+)?$/"
                />

如果用户输入 "five hundreds"，"input type=number" 如何显示错误消息

How does "input type=number" show an error message if the user inputs "five hundreds"

javascript

user-input

angularjs