Form Submit and Validation

The Angular-Validation concept was first introduced with the use ngDisabled on the submit button, but you could also leave the submit button available and then run an extra function to check the form validity before proceeding with a form submit (that function is available through the ValidationService as checkFormValidity()).

You could also use the Validation Summary for displaying all errors as a header, footer or anywhere you want to place it

Note Since version 1.5.17, you can now call a validation silently with 2nd argument set to true checkFormValidity(myForm, true). This is convenient if we want to trigger a form validation without displaying the errors right away. However please note that the validationSummary, if used, will still be shown at all time, unless you customize it's behavior by using ngShow.

Directive/Service

<!-- Option #1 - click on submit button will call a function -->
<button type="submit" ng-click="submitForm()" ng-click="">Save</button>

<!-- Option #2 - disable the submit button -->
<button type="submit" ng-disabled="form1.$invalid">Save</button>

// inject the ValidationService inside your Controller
myApp.controller('Ctrl', function ($scope, ValidationService) {

  // Option #1 requires a call to `checkFormValidity()`. checking the form before doing a real submit
  // $validationSummary can be found in 2 variables (depending if your form has a name or not)
  // you can use `checkFormValidity($scope.yourFormName)` or this `checkFormValidity($scope)`
  // If your form does not have a name attribute, your only choice is `checkFormValidity($scope)`
  $scope.submitForm = function() {
    if(new ValidationService().checkFormValidity($scope.form1)) {
      // proceed with submit
    }

    // or without a form name, use the $scope alone
    if(new ValidationService().checkFormValidity($scope)) {
      // proceed with submit
    }
  }

  // Option #2 - You could also use the $validationSummary to be displayed after a Submit
  // and prevent it from submitting any remaining errors
  $scope.submit = function (event) {
    if($scope.form1.$invalid) {
        $scope.displayValidationSummary = true;
        event.preventDefault();
    }
  }
});

Using the ControllerAs syntax

// inject the ValidationService inside your Controller
myApp.controller('Ctrl', function ($scope, ValidationService) {
  var vm = this;

  // declare the Angular-Validation global options BEFORE the functions declaration
  var vs = new ValidationService({ controllerAs: vm });

  // then after, you can declare your functions
  vm.submit = function () {
     // and use the vs Service object previously created outside of this function
     if(vs.checkFormValidity(vm.form1)) {
         // proceed with submit
     }
});

Call a validation check silently

This is available since version 1.5.17

// inject the ValidationService inside your Controller
myApp.controller('Ctrl', function ($scope, ValidationService) {
  var vm = this;

  // declare the Angular-Validation global options BEFORE the functions declaration
  var vs = new ValidationService({ controllerAs: vm });

  // call/trigger a validation check silently
  // you simply need to put the 2nd argument to true
  vs.checkFormValidity(vm.form1, true);
});