AngularJS Forms & Validation

Using AngularJS Forms you can collect number of inputs. Form can also validate input data. For any type of invalid input it can throw error for notify user.

But note to remember that this is just a client side validation. You need to validate from server side also.

Here is a sample code for AngularJS Forms:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h2>AngularJS Forms & Validation</h2>

<form ng-app="myformApp" ng-controller="myController" name="myform" novalidate>

<div>First Name:<br>
  <input type="text" name="firstname" ng-model="firstname" required>
  <span style="color:red" ng-show="myform.firstname.$dirty && myform.firstname.$invalid">
  <span ng-show="myform.firstname.$error.required">Firstname is required.</span>
  </span>
</div>

<div>Last Name:<br>
  <input type="text" name="lastname" ng-model="lastname" required>
  <span style="color:red" ng-show="myform.lastname.$dirty && myform.lastname.$invalid">
  <span ng-show="myform.lastname.$error.required">Lastname is required.</span>
  </span>
</div>

<div>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myform.email.$dirty && myform.email.$invalid">
  <span ng-show="myform.email.$error.required">Email is required.</span>
  <span ng-show="myform.email.$error.email">Invalid email address.</span>
  </span>
</div>

<div>
  <input type="submit" ng-click="formsubmit()" ng-disabled="myform.user.$dirty && myform.user.$invalid || myform.email.$dirty && myform.email.$invalid">
</div>

</form>

<script>
var app = angular.module('myformApp', []);
app.controller('myController', function($scope) {
    $scope.firstname = 'Tim';
    $scope.lastname = 'Clance';
    $scope.email = 'tim.clance@example.com';
    $scope.formsubmit = function() {
        alert($scope.firstname + ' ' + $scope.lastname);
    };
});
</script>

</body>
</html>