2

我有以下 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 类。为什么？

4

3 回答 3

3

要在范围上发布错误，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>
于 2015-08-07T17:37:26.250 回答
0

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

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

于 2017-09-06T09:48:57.327 回答
0

当您使用 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

于 2015-08-07T17:36:02.950 回答