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]+$/">
        </div>
      </div>
    </form>

Output

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

response on invalid input