Angular 验证器和 ng-maxlength 的使用答案

【问题标题】：Angular validators and ng-maxlength useAngular 验证器和 ng-maxlength 的使用
【发布时间】：2015-10-31 05:36:18
【问题描述】：

我有以下 div，如果输入长度超过 50 个字符，我想添加引导程序的类“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 验证器的“简单”信息。

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

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

【问题讨论】：

如果您只想使用 maxlength 进行验证，那么您可以使用 ng-class="{has-error: formData.titulo.$error.maxlength}"
正如我在下面解释的，输入的ngModelController 发布在指令的name 下。您需要在输入中添加 name="titulo" 以尝试工作

标签： javascript angularjs forms validation angularjs-forms

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：

是的，那会更明确，谢谢...（我没有使用它，因为 ng-maxlength 是唯一应用的验证指令）
现在看起来很完美.. +1

【解决方案3】：

当您使用 ng-model 进行验证时，此类 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

【讨论】：