AngularJS无效或有效的错误消息

Question

我创建了一个没有＆lt;的AngularJS应用程序表格＆gt; 。但是有输入字段。

我的输入字段之一是数字。

<input type="number" class="input numberfield" placeholder="0" ng-change="changePrice()" ng-model="price" ng-pattern="/^(\d)+$/" name="price" required />

现在我如何在没有名字的情况下显示错误消息？

<input type="number" class="input numberfield" placeholder="0" ng-change="changePrice()" ng-model="price" ng-pattern="/^(\d)+$/" name="price" required />
<span class="red" ng-show="price.$error.pattern">The price must be given in number format!</span>

当我在字段中输入任何字符时，它会在输入类中显示 ng-invalid ng-invalid-number 标记（屏幕截图1）。输入某个数字时，它会显示 ng-valid 类（屏幕截图2）。所以我的代码是有效的。

但问题是我的错误消息不起作用。

我遵循本教程： http://codepen.io/astockwell/pen/JyCva

但我没有表单标记

的 screenshot 1 - ng-invalid-number

的 screenshot 2 - ng-valid-number

有什么想法吗？

Answer 1

添加表单标记。

只有拥有表单标记时，Angular的验证才有效。您已经知道问题在于您没有表单标记，因此请添加一个。

如果您无法添加表单标记（就像那里已经有某些父表单标记一样），请改用ng-form，因为您可以嵌套它们。