Angular.js - Web Form

Angular.js---Web-Form.markdown

Angular.js - Web Form

An example of a web form with validation using Angular.js - ver. 1.3 being used here for ng-model-options=""

A Pen by Joe Watkins on CodePen.

License.

index.html

<div class="container" ng-app="myApp" ng-controller="formCtrl">
  
  <h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
  
  <form role="form" name="form" id="contact-form" ng-submit="submitForm()" novalidate>
    <div class="form-group">
      <label for="FirstName">First name</label>
      <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
    </div>
    
    <div class="form-group">
      <label for="LastName">Last Name</label>
      <input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
    </div>
    
    <div class="form-group">
      <label for="EmailAddress">Email address</label>
      <input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
      <div ng-show="form.EmailAddress.$dirty && form.EmailAddress.$invalid" class="bg-danger">Invalid:
        <span ng-show="form.EmailAddress.$error.required">Tell us your email.</span>
        <span ng-show="form.EmailAddress.$error.email">This is not a valid email.</span>
      </div>
      
    </div>
    
    <div class="checkbox">
      <label>
        <input type="checkbox" required> Check me out
      </label>
    </div>
    
    <button type="submit" class="btn btn-default" ng-disabled="form.$invalid" ng-model="submitButton">Submit</button>
    
  </form>
  
</div>

script.js

/* 
  ie 9+
  using 1.3
*/
var myApp = angular.module("myApp",[]);

myApp.controller("formCtrl",["$scope", function($scope){
  
  $scope.submitForm = function(){
    if($scope.form.$valid){
      alert("Form Submitted!");
    }
  }
  
}]);

style.scss

[type="text"].ng-dirty.ng-valid {
  background: #ECFFEC;
  position: relative;
}

[type="text"].ng-dirty.ng-invalid {
  background: #FFCFD0;
}

.bg-danger {
  color: #fff;
  padding: 1em;
  margin-top: 1em;
}































body { margin: 2em; }
h1 span img { width: 50px; height: 50px; }
::-webkit-input-placeholder { color: #666 !important;}
:-moz-placeholder { color: #666 !important;  }
::-moz-placeholder { color: #666 !important;  }
:-ms-input-placeholder { color: #666 !important;  }