Angular1 Validation

angular1

// Angular 1 - User input validation:

Angular 1 leverage part of HTML5 for validation.  It uses standard HTML5 
attributes, such as required, type="email", etc, but we need to add the
novalidate attribute to the form to disable browser's built-in validation.

app.controller('MainController', [function() {
  this.user = {
    name: 'John Smith',
    favoriteFruit: 'cherries',
    isActive: true
  };
  this.fruitList = ['bananas', 'apples', 'pears', 'cherries', 'peaches'];
}]);

app.filter('yesorno', function() {
  return function(value) {
    if (value === true) {
      return 'yes';
    } else if (value === false) {
      return 'no';
    } else {
      return 'unknown';
    }
  };
});

<body ng-controller="MainController as main">
  <div>
    <p>Name: {{main.user.name}}</p>
    <p>Favorite fruit: {{main.user.favoriteFruit}}</p>
    <p>Is Active: {{main.user.isActive}}</p>
  </div>

  <p>Enter name:</p>
  <p><input type="text" ng-model="main.user.name"/></p>

  <p>Select favorite fruit:</p>
  <p>
    <select 
      ng-model="main.user.favoriteFruit" 
      ng-options="fruit for fruit in main.fruitList"
    ></select>
  </p>

  <p>Select active:</p>
  <p>
    <input type="checkbox" ng-model="main.user.isActive"/>
    Is Active
  </p>
</body>

In the above code, we use a checkbox for the Is Active state.  Because we only 
need to capture two values (yes or no), we can use a single check box (if the 
check box is checked, it is equivalent to yes, and if the check box is not 
checked, it is equivalent to no).

Instead of using a check box, we can also use radio buttons, but we need two 
radio buttons instead of one.

<p>Select active:</p>
<p>
  <input type="radio" ng-model="main.user.isActive" ng-value="true"/>Yes
  <input type="radio" ng-model="main.user.isActive" ng-value="false"/>No
</p>

app.controller('MainController', [function() {
  this.user = {};
  this.submitForm = function(form) {
    if (form.$valid) {
      ...
    } else {
      ...
    }
  };
}]);

<body ng-controller="MainController as main">
  <form name="userForm" novalidate>
    <table>
      <tr>
        <td>First name:</td>
        <td><input type="text" ng-model="main.user.firstName" required /></td>
      </tr>
      <tr>
        <td>Last name:</td>
        <td><input type="text" ng-model="main.user.lastName" required /></td>
      </tr>
      <tr>
        <td>Phone (10 Digits):</td>
        <td>
          <input type="text" ng-model="main.user.phone" required
            ng-minlength="10" 
          />
        </td>
      </tr>
      <tr>
        <td>Email Address:</td>
        <td><input type="email" ng-model="main.user.email" required /></td>
      </tr>
      <tr>
        <td>Zip code:</td>
        <td>
          <input type="text" ng-model="main.user.zip" required
            ng-pattern="/(^\d{5}$)|(^\d{5}-\d{4}$)/"
          />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <button ng-click="main.submitForm(userForm)">Submit</button>
        </td>
      </tr>
    </table>
  </form>
</body>

In the above code, we use ng-pattern and ng-minlength.

When Angular validates the form, it adds classes such as ng-dirty, ng-valid, 
ng-invalid, ng-valid-parse, etc to the elements.  Using this information, we can 
create some CSS that will allow us to highlight the fields that are not valid.

ng-pristine: field has never been modified by the user
ng-dirty: field has been modified by the user.  Does not imply valid or invalid.

<style type="text/css">
  input.ng-dirty.ng-valid {
    background: green;
  }
  input.ng-dirty.ng-invalid {
    background: red;
  }
</style>

With the above code, valid fields will have green background, and invalid fields 
will have red background.

If we want to displays a message below the invalid fields, we may have to do 
additional CSS wizardry (perhaps use the sibling selector or other things) or 
use JavaScript.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License