Form validation on ng-click angularjs

Question

I am unable to find a solution in the existing answers, hence i am posting this.

I have a form which has many input fields, many of them are required.

There are buttons (more than 2) in the form and are tied to functions in controllers using ng-click.

I need to have form validated on ng-click before the function is executed.

By default, form validation is happening after function execution. Function should not run if required fields are not filled.

I have created a fiddle. https://jsfiddle.net/z1uyyqg9/

<script>     var app = angular.module('myApp', []);     app.controller('myCtrl', function($scope) {         $scope.name=undefined;         $scope.preview = function(){             alert("Previewed");         };         $scope.update = function(){             alert("Updated");         }     }); </script>  <div ng-app="myApp" ng-controller="myCtrl">      <form>         <input type="text" ng-model='name' required>         <button ng-click='preview()'>Preview</button>         <button ng-click='update()'>Update</button>     </form>  </div> 

Answer 1

A very-very simple solution is to give the form a name so you can refer to it and then tweak the ng-click to fire only if the form is valid:

<form name="myform">     <input type="text" ng-model='name' ng-required="true" />     <button ng-click="myform.$valid && preview()">Preview</button>     <button ng-click="myform.$valid && update()">Update</button> </form> 

Forked fiddle: https://jsfiddle.net/r8d1uq0L/

I like separating validation (a business concern) from the view, to that end I created egkyron that lets you define the model constraints in code and use programmatic validation along with standard Angular form validation.

Answer 2

You could set a flag so that you can show some kind of a required message or set some css class when the form is invalid.

var app = angular.module('myApp', []);  app.controller('myCtrl', function($scope) {      $scope.name=undefined;      $scope.showMsgs = false;      $scope.preview = function(form){          if ($scope[form].$valid) {              alert("Previewed");          } else {              $scope.showMsgs = true;          }      };      $scope.update = function(form){          if ($scope[form].$valid) {              alert("Updated");          } else {              $scope.showMsgs = true;          }          };  });

.error {    border-color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myApp" ng-controller="myCtrl">        <form name="myform" novalidate ng-init="disabled=false">          <p ng-show="showMsgs && myform.name.$error.required">This field is required</p>          <input type="text" name="name" ng-model='name' ng-required="!disabled" ng-disabled="disabled" ng-class="{error: showMsgs && myform.name.$error.required}" />                    <button ng-click="preview('myform')">Preview</button>          <button ng-click="update('myform')">Update</button>          <button ng-click="disabled=!disabled">toggle disabled</button>      </form>    </div>