CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrapng-messages
lito
lito

Reputation: 3125

why ngMessages alert appears only one time?

why ngMessages alert appears only one time? When I use (data-dismiss="alert" class="close") from the bootstrap options the alert is hide but then it never shows up again.

<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

Thanks!

Upvotes: 0

Views: 263

Answers (1)

Devner
Devner

Reputation: 7235

Try this:

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

What this will do is show/hide the error message when the user touches the field but does not necessarily make any changes to it. You do not need the button to remove the error message manually as it will be hidden automatically if the user input matches your conditions. You can replace $touched with $pristine or $dirty to trigger the error message based on whether user has not entered anything or has entered something in the field.

Upvotes: 2

Related Questions