use-form-error. Example for stackoverflow

useFormError is a angularjs directive, which is designed to create custom checks

by Stepan Kasyanenko

HTML

<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <form name="searchForm" id="searchForm" ng-submit="search()">
      pristine = {{searchForm.$pristine}} valid ={{searchForm.$valid}}
      <div>
        <label>
          Area Code
          <input type="tel" name="areaCode" ng-model="obj.areaCode" ng-pattern="/^([0-9]{3})?$/" ng-model-options="{ allowInvalid: true }">
        </label>

        <div ng-messages="searchForm.areaCode.$error">
          <div class="error" ng-message="pattern">The area code must be three digits</div>
        </div>
      </div>

      <div>
        <label>
          Phone Number
          <input type="tel" name="phoneNumber" ng-model="obj.phoneNumber" ng-pattern="/^([0-9]{7})?$/" ng-model-options="{ allowInvalid: true }">
        </label>

        <div ng-messages="searchForm.phoneNumber.$error">
          <div class="error" ng-message="pattern">The phone number must be seven digits</div>
        </div>
      </div>

      <br>
      <div>
        <button ng-click="reset(searchForm)" type="reset">Reset</button>
        <button type="submit" ng-disabled="searchForm.$invalid">Search</button>
      </div>
    </form>

  </div>
</div>

CSS

.error {
  color: maroon
}

JavaScript

angular.module('ExampleApp', ['use', 'ngMessages'])
  .controller('ExampleController', function($scope) {
    $scope.resetCount = 0;
    $scope.obj ={};
    $scope.reset = function(form_) {
      $scope.resetCount++;
      $scope.obj = {};
      console.log($scope.resetCount);
    };

    $scope.search = function() {
      alert('Searching');
    };
  });