Angular Form Validation

<!-- component template -->
<form name="testForm">
  <input type="text" name="field1" ng-model="obj.field1" required>

  <div ng-messages="testForm.field1.$error" ng-messages-include="messages.html" ng-show="testForm.field1.$dirty"></div>

  <button type="submit">Send</button>
</form>

<!-- messages.html -->
Field is required.

app.service("formValidation", ->
  setDirtyField = (field) ->
      # set $dirty property for the field
      field.$setDirty()

  localValidateForm: (form) ->
      # angular form validate
      # there can be nested forms therefore we should repeat the action recursively
      _formValidate = (innerForm) ->
          # check every form attribute angular.forEach
          angular.forEach innerForm, (field, name) ->
              # check if current attribute is a control or nested form
              # in this case attribute name doesn’t have “$” in the beginning
              if angular.isString(name) and !name.match('^[\$]')
                  setDirtyField field
                  # check if attribute has method $setViewValue
                  # this allows to identify whether it is a control or a nested form
                  # if there’s no $setViewValue method then this is a nested form
                  if not angular.isFunction(field.$setViewValue)
                      _formValidate field
      _formValidate form
      return

app.directive('submit', ['$parse', 'formValidation', ($parse, formValidation) ->
  restrict: 'A'
  link: (scope, formElement, attrs) ->
    # link to Submit action of the form
    formElement.bind 'submit', (e) ->
      # get the form from current element
      form = scope[attrs.name] or scope.$eval(attrs.name) or scope.$eval(attrs.ngForm)
      # stops submit action
      e.preventDefault()
      # sets $dirty with our service
      formValidation.localValidateForm form
      # call $digest loop to watch errors
      scope.$apply()
      if form.$valid
        # call handler that we passes to the function
        fn = $parse(attrs.submit)
        scope.$apply(-> fn(scope, {$event: e}))
      return
  ])

<form name="testForm" submit="submitForm()">
  <input type="text" name="field1" ng-model="obj.field1" required>
  <div ng-messages="testForm.field1.$error" ng-messages-include="messages.html" ng-show="testForm.field1.$dirty"></div>
  <button type="submit">Send</button>
</form>

// Requirements declaration:
var constraints = {
  username: { presence: true },
  password: {
    presence: true,
    length: {
      minimum: 6,
      message: "must be at least 6 characters"
    }
  }
}

// Validation example:

validate({password: "bad"}, constraints);
// => {
//   "username": ["Username can't be blank"],
//   "password": ["Password must be at least 6 characters"]
// }

// Validation of single value:
validate.single("foo", {presence: true, email: true});
// => ["is not a valid email"]

<div ng-controller="TestCtrl as $ctrl">
  <button type="button" ng-click="$ctrl.checkData()">Check data</button>
  <form name="$ctrl.testForm" submit="$ctrl.submitForm()" ng-if="$ctrl.showTestForm">
    <input type="text" name="field1" ng-model="$ctrl.obj.field1" required>
    <div ng-messages="testForm.field1.$error" ng-messages-include="messages.html" ng-show="$ctrl.testForm.field1.$dirty"></div>
    <button type="submit">Send</button>
  </form>
</div>

#Controller
app.controller('TestCtrl', ['$timeout', 'formValidation', ($timeout, formValidation) ->
  ctrl = @
  ctrl.obj = {field1: ''}
  ctrl.showTestForm = false
  # requirements for the form
  constraints = field1: { presence: true }
  ctrl.checkData = ->
    # validation
    if validate(ctrl.obj, constraints)
      # if values are invalid then show form and errors
      ctrl.showTestForm = true
      # timeout is necessary as the form controller is not available right away
      $timeout((-> formValidation.localValidateForm(ctrl.testForm)), 0)
    return

  ctrl.submitForm = ->
    alert('Data ' + ctrl.obj.field1)
    return
  return
])