Angular 验证器和 ng-maxlength 使用

Question

我有以下 div，如果输入长度超过 50 个字符，我想添加 bootstrap 的 class "has-error"。这是 HTML:

<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>

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

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

编辑 1：

我已经看到了你的所有回复，感谢你学到了一些新东西，但这仍然无法正常工作。目前是这样的：

  <div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control"  id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
  </div>

还测试了直接检查长度，正如你们中的一位建议的那样。但是这些解决方案中的 none 似乎有效：它从不添加 has-error class。为什么？

Answer 1

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

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

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

Answer 2

要在范围内发布错误，需要 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 3

如果您使用最大长度，用户将永远无法输入超过该长度的字符，因此您永远不会收到 ng-maxlength 错误。恕我直言，一起使用 maxlength 和 ngMaxlength 是没有意义的。

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

Angular 验证器和 ng-maxlength 使用

Angular validators and ng-maxlength use

javascript

forms

validation

angularjs

angularjs-forms