Question

所有

我正在研究AngularJS表单，并试图了解ng-messages指令如何与ng-messages-multiple一起使用。我似乎无法获得多个错误。我希望同时看到所需的和最小的错误，但出于某种原因，我只看到必需的，然后是最小的。我在下面发布了HTML。我使用bower包含ng-messages，在index.html页面中调用脚本，然后根据需要注入我的app.js模块。

我在这个项目中使用AngularJS v1.3.2。

    <div class="panel panel-default">
  <div class="panel-heading">
    <h1>Validation Test Form</h1>
  </div>
  <div class="panel-body">
    <form class="form" name="form" role="form" ng-submit="submit(form)">
      <div class="row">
        <div class="form-group" show-errors>
          <label for="name">Name:</label>
          <input
          class="form-control"
          type="text"
          name="name"
          ng-model="formModel.name"
          minlength="5"
          required/>
          <div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
            <div ng-message="required">Required!</div>
            <div ng-message="minlength">Minimum length is 5</div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="form-group">
          <button class="btn btn-success" type="submit">Save</button>
        </div>
      </div>
    </form>
  </div>
  <div class="panel-footer">
    {{formError}}
  </div>
</div>

Answer 1

尝试使用ng-minlength代替minlength

<input
          class="form-control"
          type="text"
          name="name"
          ng-model="formModel.name"
          ng-minlength="5"
          required/>

代替

<input
          class="form-control"
          type="text"
          name="name"
          ng-model="formModel.name"
          minlength="5"
          required/>

修改

这是ng-minlength指令的正常行为，该指令仅在我们没有0输入大小时才进行验证，输入一个值必须至少5个字符长，但是可以将该字段留空，不幸的是，无论如何你没有实现，你想要的。如果您非常希望显示两条消息，我建议您创建自定义指令或查看带有需要行为的ng-pattern指令。

AngularJS验证 - ng-messages-multiple不显示多个错误

1 个答案: