From f46ab8ee3d2bb6df91f436a76370db229abfbe30 Mon Sep 17 00:00:00 2001
From: Clay Anderson <supersonicclay@gmail.com>
Date: Fri, 14 Nov 2014 15:22:56 -0700
Subject: [PATCH 1/2] Enhanced form examples to utilize $touched

The "Binding to form and control state" example now more closely reflects how users will accomplish form validation in 1.3. For example, users are now informed of validation requirements upon clicking Save.
---
 docs/content/guide/forms.ngdoc | 75 +++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc
index 370ffbe3f5c7..cb32b2ae34af 100644
--- a/docs/content/guide/forms.ngdoc
+++ b/docs/content/guide/forms.ngdoc
@@ -27,8 +27,8 @@ for other directives to augment its behavior.
         E-mail: <input type="email" ng-model="user.email" /><br />
         Gender: <input type="radio" ng-model="user.gender" value="male" />male
         <input type="radio" ng-model="user.gender" value="female" />female<br />
-        <button ng-click="reset()">RESET</button>
-        <button ng-click="update(user)">SAVE</button>
+        <input type="button" ng-click="reset()" value="Reset" />
+        <input type="submit" ng-click="update(user)" value="Save" />
       </form>
       <pre>form = {{user | json}}</pre>
       <pre>master = {{master | json}}</pre>
@@ -77,29 +77,28 @@ To allow styling of form as well as controls, `ngModel`  adds these CSS classes:
 
 The following example uses the CSS to display validity of each form control.
 In the example both `user.name` and `user.email` are required, but are rendered
-with red background only when they are dirty. This ensures that the user is not distracted
+with red background only when they are touched. This ensures that the user is not distracted
 with an error until after interacting with the control, and failing to satisfy its validity.
 
 <example module="formExample">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form novalidate class="css-form">
-        Name:
-          <input type="text" ng-model="user.name" required /><br />
+        Name: <input type="text" ng-model="user.name" required /><br />
         E-mail: <input type="email" ng-model="user.email" required /><br />
         Gender: <input type="radio" ng-model="user.gender" value="male" />male
         <input type="radio" ng-model="user.gender" value="female" />female<br />
-        <button ng-click="reset()">RESET</button>
-        <button ng-click="update(user)">SAVE</button>
+        <input type="button" ng-click="reset()" value="Reset" />
+        <input type="submit" ng-click="update(user)" value="Save" />
       </form>
     </div>
 
     <style type="text/css">
-      .css-form input.ng-invalid.ng-dirty {
+      .css-form input.ng-invalid.ng-touched {
         background-color: #FA787E;
       }
 
-      .css-form input.ng-valid.ng-dirty {
+      .css-form input.ng-valid.ng-touched {
         background-color: #78FA89;
       }
     </style>
@@ -140,34 +139,42 @@ the view using the standard binding primitives.
 
 This allows us to extend the above example with these features:
 
-- RESET button is enabled only if form has some changes
-- SAVE button is enabled only if form has some changes and is valid
-- custom error messages for `user.email` and `user.agree`
+- Custom error message displayed upon interacting (touching) a field or submitting the form
 
 <example module="formExample">
   <file name="index.html">
     <div ng-controller="ExampleController">
       <form name="form" class="css-form" novalidate>
         Name:
-          <input type="text" ng-model="user.name" name="uName" required /><br />
+        <input type="text" ng-model="user.name" name="uName" required="" />
+        <br />
+        <div ng-show="form.$submitted || form.uName.$touched">
+          <div ng-show="form.uName.$error.required">Tell us your name.</div>
+        </div>
+
         E-mail:
-          <input type="email" ng-model="user.email" name="uEmail" required/><br />
-        <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
+        <input type="email" ng-model="user.email" name="uEmail" required="" />
+        <br />
+        <div ng-show="form.$submitted || form.uEmail.$touched">
           <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
           <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
         </div>
 
-        Gender: <input type="radio" ng-model="user.gender" value="male" />male
-        <input type="radio" ng-model="user.gender" value="female" />female<br />
-
-        <input type="checkbox" ng-model="user.agree" name="userAgree" required />
-        I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
-                  required /><br />
-        <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
-
-        <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
-        <button ng-click="update(user)"
-                ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
+        Gender:
+        <input type="radio" ng-model="user.gender" value="male" />male
+        <input type="radio" ng-model="user.gender" value="female" />female
+        <br />
+        <input type="checkbox" ng-model="user.agree" name="userAgree" required="" />
+        
+        I agree:
+        <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required="" />
+        <br />
+        <div ng-show="form.$submitted || form.userAgree.$touched">
+          <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
+        </div>
+        
+        <input type="button" ng-click="reset(form)" value="Reset" />
+        <input type="submit" ng-click="update(user)" value="Save" />
       </form>
     </div>
   </file>
@@ -176,19 +183,19 @@ This allows us to extend the above example with these features:
     angular.module('formExample', [])
       .controller('ExampleController', ['$scope', function($scope) {
         $scope.master = {};
-
+  
         $scope.update = function(user) {
           $scope.master = angular.copy(user);
         };
-
-        $scope.reset = function() {
+  
+        $scope.reset = function(form) {
+          if (form) {
+            form.$setPristine();
+            form.$setUntouched();
+          }
           $scope.user = angular.copy($scope.master);
         };
-
-        $scope.isUnchanged = function(user) {
-          return angular.equals(user, $scope.master);
-        };
-
+  
         $scope.reset();
       }]);
   </file>

From 38ee6c24afcef8202d85d23514c89790f10c4cfc Mon Sep 17 00:00:00 2001
From: Clay Anderson <supersonicclay@gmail.com>
Date: Tue, 18 Nov 2014 15:04:22 -0700
Subject: [PATCH 2/2] Clarified wording

---
 docs/content/guide/forms.ngdoc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/content/guide/forms.ngdoc b/docs/content/guide/forms.ngdoc
index cb32b2ae34af..8be57fb8f271 100644
--- a/docs/content/guide/forms.ngdoc
+++ b/docs/content/guide/forms.ngdoc
@@ -139,7 +139,9 @@ the view using the standard binding primitives.
 
 This allows us to extend the above example with these features:
 
-- Custom error message displayed upon interacting (touching) a field or submitting the form
+- Custom error message displayed after interacting with a control (i.e. `$touched`)
+- Custom error message displayed upon submitting the form even if user didn't interact with a control (i.e. `$submitted`)
+
 
 <example module="formExample">
   <file name="index.html">