Question

我有以下div，我想添加bootstrap的类＆＃34; has-error＆＃34;如果输入长度超过50个字符。这是HTML：

bool

我该如何使这项工作？我想当你达到50个字符时，ng-maxlength会抛出一个错误，就像$ error对象一样，但我不知道对象是什么，如何访问它，以及我是否需要在控制器或指令中做更多的工作

这里有什么帮助吗？我找不到任何＆＃34; easy＆＃34;有关此问题的信息和Angular验证器。

编辑1：

我已经看到了你的所有回复，感谢你学到了新的东西，但这仍然不行。目前就是这样：

<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">

    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control" id="inputTitulo" 
           maxlength="50" ng-maxlength="50" ng-model="formData.titulo">

</div>

还测试了直接检查长度，正如你建议的那样。但是这些解决方案似乎都不起作用：它从不添加has-error类。为什么呢？

Answer 1

要在范围上发布错误，需要form指令。

<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
  <input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>

（请注意，上面使用输入的name属性来发布表单数据 - 实际上，ngModelController - 在范围内）

因此，上述工作，如果您进行表单验证，则更可取。但是，如果您只需要检查某些输入的长度，则不必使用表单验证 - 您可以直接检查模型：

<div ng-class="{'has-error': formData.foo.length > 50}>
  <input ng-model="formData.foo">
</div>

Answer 2

当您使用ng-model进行验证时，此类 ng-invalid 将添加到您的输入中 docs：https://docs.angularjs.org/api/ng/directive/ngModel

使用$ error你需要使用不是ng-model的表单和名称来访问它，并且ng-class应该绑定到$ error.maxlength而不仅仅是$ error

教程：https://scotch.io/tutorials/angularjs-form-validation

Answer 3

如果使用maxlength，用户将永远无法输入更多字符，因此您永远不会得到ng-maxlength错误。恕我直言地使用maxlength和ngMaxlength是没有意义的。

请参阅docs.angularjs.org/api/ng/directive/ngMaxlength上的示例（打开plunker中的示例并添加maxlength属性）

角度验证器和ng-maxlength使用

3 个答案: