title: Angular JS - How to make form validation as global service? Best practice
body: <p>I have a few forms with data validation in my Angular app.
  All forms contains same validation messages like this:</p>
  
  <pre><code> &lt;span class="formValidationError" ng-show="myForm.customViewName.$error.required"&gt;Required!&lt;/span&gt;&lt;br&gt;
                      &lt;span class="formValidationError" ng-show="myForm.customViewName.$error.minlength"&gt;Too short!&lt;/span&gt;
                      &lt;span class="formValidationError" ng-show="myForm.customViewName.$error.maxlength"&gt;Too long!&lt;/span&gt;
                      &lt;span class="formValidationSuccess" ng-show="myForm.$valid"&gt;Data valid&lt;/span&gt;
  </code></pre>
  
  <p>I would like to make my forms much easier for maintenance.</p>
  
  <p>Is possible to make this validation message as globals service, directive, or something similar?</p>
  
  <p><strong>My forms looks like this one:</strong></p>
  
  <pre><code>&lt;div class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Add name of custom view&lt;/h4&gt;
              &lt;/div&gt;
              &lt;form name="myForm"&gt;
              &lt;div class="modal-body"&gt;
                      &lt;input type="text" name="customViewName" ng-model="customView.name" class="form-control" ng-minlength="5" ng-maxlength="10" required&gt;
                      &lt;span class="formValidationError" ng-show="myForm.customViewName.$error.required"&gt;Required!&lt;/span&gt;&lt;br&gt;
                      &lt;span class="formValidationError" ng-show="myForm.customViewName.$error.minlength"&gt;Too short!&lt;/span&gt;
                      &lt;span class="formValidationError" ng-show="myForm.customViewName.$error.maxlength"&gt;Too long!&lt;/span&gt;
                      &lt;span class="formValidationSuccess" ng-show="myForm.$valid"&gt;Data valid&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button"  class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;button type="button" ng-controller="UsersCtrl" ng-disabled="!myForm.$valid" ng-click="saveCustomView()" class="btn btn-primary"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>Could please somebody recommend some good solution for this?</p>
  
  <p>Thanks for any advice.</p>