AngularJS无效或有效的错误消息

时间:2015-07-09 19:03:12

标签: angularjs validation

我创建了一个没有<的AngularJS应用程序表格> 。但是有输入字段。

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

<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 1 - ng-invalid-number

screenshot 2 - ng-valid-number

screenshot 2 - ng-valid-number

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

添加表单标记。

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

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