Question

为什么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>

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

谢谢！

Answer 1

试试这个：

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

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

为什么ngMessages警报只出现一次？

1 个答案: