Wednesday, November 25, 2015

Angular ng-class for error message

We can use angular ng-class to change the style based on error. 

Edit in plunker

ng-Class : Directive allows us to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added.

Steps involved

  • Include css class
  • Use control-group class from bootstrap
  • Specify error condition 

 <form name="myForm">
      <div class="control-group" ng-class="{ error: myForm.salt.$invalid }">
        <label class="control-label" for="number">Salt: </label>
        <div class="controls">
          <input type="number" name="salt" ng-model="salt1" ng-pattern="/^[0-9A-Fa-f]+$/">

Note: label and border color changes based on the input value

response on invalid input

No comments:

Post a Comment