Form validation demo app in AngularJs

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="mystyle.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script>
    var app = angular.module('formApp', []);
    app.controller('formCtrl', function($scope) {

      $scope.sendForm = function() {
        alert('Form Is submited');
      };

      $scope.getClass = function(color) {
        return color.toString();
      }
    });
  </script>
</head>

<body ng-app="formApp" ng-controller="formCtrl">
  <h3>Form validation demo app in AngularJs</h3>
  <form name="personForm" ng-submit="sendForm()">
    <div>
      <label for="name">Name</label>
      <input id="name" name="name" type="text" ng-model="person.name" required/>
      <span class="error" ng-show="personForm.name.$error.required">Required!</span>
    </div>
    <div class="space"></div>
    <div>
      <label for="adress">Adress</label>
      <input id="address" name="address" type="text" ng-model="person.address" required/>
      <span class="error" ng-show="personForm.address.$error.required">Required!</span>
    </div>
    <div class="space"></div>
    <div>
      <label for="contact">Contact No</label>
      <input id="mobile" name="mobile" type="number" ng-model="person.mobile" required/>
      <span class="error" ng-show="personForm.mobile.$error.required">Required with number!</span>
      <span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>
    </div>
    <div class="space"></div>
    <div>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" ng-model="person.email" required/>
      <span class="error" ng-show="personForm.email.$error.required">Required!</span>
      <span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>
    </div>
    <div class="space"></div>
    <div>
      <input type="checkbox" ng-model="terms" name="terms" id="terms" required/>
      <label for="terms">I Agree to the terms.</label>
      <span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span>
    </div>
    <div class="space"></div>
    <div>
      <button type="submit">Submit Form</button>
    </div>
  </form>

</body>

</html>

 /* Put your css in here */
 
 .invalid.true {
   background: gray;
 }
 
 .valid.false {
   background: red;
 }
 
 .valid.true {
   background: green;
 }
 
 .error {
   color: red;
 }
 .space{
   padding-top:10px;
 }
 input[type=text] {
    height: 25px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #ccc;
    border-color: rgba(0,0,0,.30);
    background-color: white;
    font-size: 16px;
}

 input[type=email] {
    height: 25px;
    position: relative;
    left: 0;
    outline: none;
    border: 1px solid #ccc;
    border-color: rgba(0,0,0,.30);
    background-color: white;
    font-size: 16px;
}

 input[type=number] {
    height: 25px;
    border: 1px solid #ccc;
    border-color: rgba(0,0,0,.30);
    background-color: white;
}