0

为什么 ngMessages 警报只出现一次？当我从引导选项中使用 (data-dismiss="alert" class="close") 时，警报被隐藏，但它再也不会出现。

<body ng-app="ngMessagesExample">
  <form name="myForm">
    <label>
      Enter your name:
      <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
    </label>
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

    <div ng-messages="myForm.myName.$error">
      <div role="alert" class="alert alert-danger alert-dismissible fade in">
        <button aria-label="Close" data-dismiss="alert" class="close" type="button">
          <span aria-hidden="true">when close never display again -> ×</span>
        </button>
        <div ng-message="required">You did not enter a field</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
      </div>
    </div>
  </form>
</body>

代码笔： http ://codepen.io/mescal/pen/PZpWjd?editors=101

谢谢！

4

1 回答 1

2

尝试这个：

<body ng-app="ngMessagesExample">
  <form name="myForm">
    <label>
      Enter your name:
      <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
    </label>
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

    <div ng-messages="myForm.myName.$error" ng-show="myForm.myName.$touched">
        <div ng-message="required">You did not enter a field</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
    </div>
  </form>
</body>

这将做的是在用户触摸该字段但不一定对其进行任何更改时显示/隐藏错误消息。您不需要手动删除错误消息的按钮，因为如果用户输入符合您的条件，它将自动隐藏。您可以将 $touched 替换为 $pristine 或 $dirty 以根据用户是否未输入任何内容或在字段中输入内容来触发错误消息。

于 2016-01-21T08:02:31.327 回答