Permalink
Browse files

added email field and fields and form status

  • Loading branch information...
1 parent 916668d commit 9bdac38436ce956639a055d5211baa79cf6fd08f @cihad committed Mar 19, 2013
Showing with 78 additions and 12 deletions.
  1. +78 −12 form-validation/index.html
@@ -1,51 +1,117 @@
<!doctype html>
-<html ng-app>
+<html ng-app="userForm">
<head>
<title>Form Validation</title>
<link rel="stylesheet" type="text/css" href="../bootstrap.css">
<script type="text/javascript" src="../angular.js"></script>
+
+ <style type="text/css">
+ .pristine.true, .dirty.true, .invalid.true {
+ background: rgb(206, 206, 206);
+ }
+ .valid.false {
+ background: rgb(223, 149, 160);
+ }
+ .valid.true {
+ background: rgb(155, 213, 132);
+ }
+ </style>
</head>
<body>
- <div class="container">
+ <script type="text/javascript">
+ app = angular.module('userForm', [])
+ app.controller('MainCtrl', function($scope) {
+ $scope.getClass = function(b) {
+ return b.toString();
+ }
+ });
+ </script>
+
+ <div class="container" ng-controller="MainCtrl">
<div class="row">
<div class="span8 offset2">
- <div class="form-horizontal" ng-form="exampleForm">
+ <div class="form-horizontal" ng-form="userForm">
<fieldset>
<legend>Example Form</legend>
- <div class="alert alert-error" ng-show="exampleForm.$invalid">Invalid form!</div>
- <div class="alert alert-success" ng-show="exampleForm.$valid">Valid form!</div>
- <div class="control-group" ng-class="{error: exampleForm.first_name.$error.required}">
- <label class="control-label">
+ <div class="alert alert-error" ng-show="userForm.$invalid">Invalid form!</div>
+ <div class="alert alert-success" ng-show="userForm.$valid">Valid form!</div>
+ <div class="control-group" ng-class="{error: userForm.first_name.$invalid}">
+ <label class="control-label" id="first_name">
First name
<attr class="text-error" title="Required">*</attr>
</label>
<div class="controls">
<input type="text" name="first_name" ng-model="first_name" required value="Cihad">
- <span class="help-inline" ng-show="exampleForm.first_name.$error.required">Please fill the input</span>
+ <span class="help-inline" ng-show="userForm.first_name.$error.required">Please fill the input</span>
</div>
</div>
- <div class="control-group" ng-class="{error: exampleForm.last_name.$error.required}">
- <label class="control-label">
+ <div class="control-group" ng-class="{error: userForm.last_name.$invalid }">
+ <label class="control-label" id="last_name">
Last name
<attr class="text-error" title="Required">*</attr>
</label>
<div class="controls">
<input type="text" name="last_name" ng-model="last_name" required>
- <span class="help-inline" ng-show="exampleForm.last_name.$error.required">Please fill the input</span>
+ <span class="help-inline" ng-show="userForm.last_name.$error.required">Please fill the input</span>
+ </div>
+ </div>
+
+ <div class="control-group" ng-class="{error: userForm.email.$invalid }">
+ <label class="control-label" id="email">
+ Email
+ <attr class="text-error" title="Required">*</attr>
+ </label>
+ <div class="controls">
+ <input type="email" name="email" ng-model="email" required>
+ <span class="help-inline" ng-show="userForm.email.$error.required">Please fill the input</span>
+ <span class="help-inline" ng-show="userForm.email.$error.email">Invalid email</span>
</div>
</div>
<div class="form-actions">
- <input type="submit" class="btn" ng-disabled="exampleForm.$invalid" />
+ <input type="submit" class="btn" ng-disabled="userForm.$invalid" />
</div>
</fieldset>
</div>
+
+ <legend>Status</legend>
+ <div class="well">
+ <table class="table">
+ <thead>
+ <tr>
+ <th></th>
+ <th>$pristine</th>
+ <th>$dirty</th>
+ <th>$valid</th>
+ <th>$invalid</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr ng-repeat="field in ['first_name', 'last_name', 'email']">
+ <th>{{field}}</th>
+ <td ng-class="getClass(userForm[field].$pristine)" class="pristine"></td>
+ <td ng-class="getClass(userForm[field].$dirty)" class="dirty"></td>
+ <td ng-class="getClass(userForm[field].$valid)" class="valid"></td>
+ <td ng-class="getClass(userForm[field].$invalid)" class="invalid"></td>
+ </tr>
+ <tr>
+ <th>userForm</th>
+ <td ng-class="getClass(userForm.$pristine)" class="pristine"></td>
+ <td ng-class="getClass(userForm.$dirty)" class="dirty"></td>
+ <td ng-class="getClass(userForm.$valid)" class="valid"></td>
+ <td ng-class="getClass(userForm.$invalid)" class="invalid"></td>
+ </tr>
+ </tbody>
+ </table>
+
+ </div>
+
</div>
</div>
</div>

0 comments on commit 9bdac38

Please sign in to comment.