Angular:Form Fiddle

by Leonardo Trimarchi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <div ng-show="registrationForm.$pristine">
    Form input has not yet started
  </div>
  <div ng-show="registrationForm.$dirty">
    Form input has started
  </div>
  <form name="registrationForm" ng-submit="register()" novalidate>
    <input type="text" placeholder="First Name" name="firstName" ng-model="person.firstName" required />
    <span ng-show="firstNameInvalid"><br/>Please enter a value for First Name</span>
    <br/>

    <input type="text" placeholder="Last Name" name="lastName" ng-model="person.lastName" required />
    <span ng-show="lastNameInvalid"><br/>Please enter a value for Last Name</span>
    <br/>

    <input type="email" placeholder="Email" name="email" ng-model="person.email" required />
    <span ng-show="emailInvalid"><br/>Please enter a value for Email</span>
    <br/>

    <select name="research" ng-model="person.levels" ng-options="obj.label as obj.value for obj in person.channels" required>
      <option value="">Where did you hear about us?</option>

    </select>

    <span ng-show="researchInvalid"><br/> Please tell us where you heard about us</span>
    <br/>
    <input ng-model="person.newsletterOptIn" type="checkbox" name="newsletterOptIn" id="newsletterOptIn" value="newsletterOptIn" />
    <label for="newsletterOptin">Receive Monthly Newsletter</label>
    <br/>
    <input type="submit" value="Register" />
  </form>

  <div ng-show="doShow">
    Thank you for taking the time to register
  </div>

</div>

CSS

body {
  font: normal 16px/1.4 Georgia;
}

input:not([type='checkbox']),
select {
  width: 250px;
}

select,
input {
  padding: 5px;
  margin-top: 12px;
  font-family: inherit;
}

input[type='submit'] {
  width: 264px;
}

form span {
  color: red;
}

input[name='email'].ng-dirty.ng-invalid {
  color: red;
}

input[name='email'].ng-dirty.ng-valid {
  color: green;
}

JavaScript

var myApp = angular.module('myApp', []);

angular.module('myApp').controller('MyCtrl', function($scope) {
  $scope.person = {};
  $scope.person.newsletterOptIn = false;
  $scope.person.channels = [{
    value: "television",
    label: "Television"
  }, {
    value: "radio",
    label: "Radio"
  }, {
    value: "social-media",
    label: "Social Media"
  }, {
    value: "other",
    label: "Other"
  }, {
    value: "Internet",
    label: "Internet"
  }];

  $scope.register = function() {
    $scope.firstNameInvalid = false;
    $scope.lastNameInvalid = false;
    $scope.emailInvalid = false;
    if (!$scope.registrationForm.firstName.$valid) {
      $scope.firstNameInvalid = true;
    }
    if (!$scope.registrationForm.lastName.$valid) {
      $scope.lastNameInvalid = true;
    }
    if (!$scope.registrationForm.email.$valid) {
      $scope.emailInvalid = true;
    }
    if (!$scope.registrationForm.research.$valid) {
      $scope.researchInvalid = true;
    }
    if ($scope.registrationForm.$valid) {
      $scope.doShow = true;
    }
  }


});