3

我正在使用ng-messages并想知道是否可以在一个代码块中检查多个字段，而不必重复：

所以我有：（注意checkCustom是我写的自定义指令）

<div ng-messages="registrationForm.field1.$error" ng-if="registrationFormValid">
    <span ng-message="required">please enter field 1</span>
    <span ng-message="checkCustom">please check custom value</span>
</div>

和

<div ng-messages="registrationForm.field2.$error" ng-if="registrationFormValid">
    <span ng-message="required">please enter field 1</span>
    <span ng-message="checkCustom">please check custom value</span>
</div>

但是我更喜欢这样的东西：

<div ng-messages="registrationForm.field1.$error || registrationForm.field2.$error" ng-if="registrationFormValid">
    <span ng-message="required">please enter field 1</span>
    <span ng-message="checkCustom">please check custom value</span>
</div>

这样的事情可能吗？

谢谢

4

3 回答 3

4

表单的控制器有一个方便的属性，称为$error. 这是一个对象哈希，包含对带有失败验证器的控件或表单的引用，其中它的键是错误名称（例如email, required,minlength等），它们的值是具有给定错误名称的失败验证器的控件或表单的数组 -源.

这意味着我们可以通过检查该对象是否包含特定的键名来全局检查表单内的错误。$error

看看这个例子：

angular.module('myApp', ['ngMessages']);
[ng-cloak] {
  display: none !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

<div ng-app="myApp" ng-cloak>
  <form name="myForm">
    <div class="form-group">
      <h3>Validation messages:</h3>

      <div ng-messages="myForm.$error" multiple>
        <div ng-message="required" class="alert alert-danger">There's at least one <strong>required</strong> field</div>
        <div ng-message="minlength" class="alert alert-danger">There's at least one field which doesn't fulfill the <strong>minlength</strong> condition</div>
        <div ng-message="email" class="alert alert-danger">The form contains an invalid <strong>email</strong> input</div>
      </div>
    </div>
    <div class="form-group">
      <label>Required Input 1</label>
      <input type="text" ng-model="myModel1" required>
    </div>
    <div class="form-group">
      <label>Required Input 2</label>
      <input type="text" ng-model="myModel2" required>
    </div>
    <div class="form-group">
      <label>Required Input 3 which has min-length="3"</label>
      <input type="text" ng-model="myModel3" required ng-minlength="3">
    </div>
    <div class="form-group">
      <label>Required Input 4 which is type="email"</label>
      <input type="email" ng-model="myModel4" required>
    </div>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script>

于 2016-04-03T15:05:44.913 回答
0

只需使用

<div ng-if="registrationForm.field1.$error.required || registrationForm.field2.$error.required">
<span class="required">please enter field 1</span>
</div>
于 2017-03-05T02:58:27.340 回答
0

如果您不想在所有块中添加相同的消息并将其添加到一个地方，您可以执行以下操作：

  1. 在文件中添加所有消息

    <!-- remote file: error-messages.html --><div ng-message="required">please enter field 1</div> <div ng-message="checkCustom">please check custom value</div>

  2. 只需将该文件包含在您想要的任何位置。

    <div ng-messages="registrationForm.field1.$error" ng-messages-include="error-messages.html"> </div>

所以代码被重用了。对于不同的错误消息，覆盖块内的该消​​息。

有关更多信息，请查看这篇精彩的博客文章。我认为您不能在单个 ng-messages 块中添加两个字段。

于 2016-04-02T17:43:24.807 回答