From 21c725f1a12d1de758cab6e4c4fafc5c420eb565 Mon Sep 17 00:00:00 2001
From: Vojta Jina
Date: Wed, 15 Feb 2012 17:16:02 -0800
Subject: refactor(forms): Even better forms

- remove $formFactory completely
- remove parallel scope hierarchy (forms, widgets)
- use new compiler features (widgets, forms are controllers)
- any directive can add formatter/parser (validators, convertors)

Breaks no custom input types
Breaks removed integer input type
Breaks remove list input type (ng-list directive instead)
Breaks inputs bind only blur event by default (added ng:bind-change directive)
---
 docs/content/api/angular.inputType.ngdoc | 58 ----------------------
 docs/content/cookbook/advancedform.ngdoc |  2 +-
 docs/content/guide/dev_guide.forms.ngdoc | 82 +++++++++++++-------------------
 docs/src/templates/index.html            |  2 +-
 4 files changed, 34 insertions(+), 110 deletions(-)

(limited to 'docs')

diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc
index 9cbf9eb2..a5d1f74a 100644
--- a/docs/content/api/angular.inputType.ngdoc
+++ b/docs/content/api/angular.inputType.ngdoc
@@ -32,61 +32,3 @@ All `inputType` widgets support:
     - **`ng:pattern`** Sets `PATTERN` validation error key if the value does not match the
       RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for
       patterns defined as scope expressions.
-
-
-
-# Example
-
-<doc:example>
-<doc:source>
-   <script>
-     angular.inputType('json', function(element, scope) {
-       scope.$parseView = function() {
-         try {
-           this.$modelValue = angular.fromJson(this.$viewValue);
-           if (this.$error.JSON) {
-             this.$emit('$valid', 'JSON');
-           }
-         } catch (e) {
-             this.$emit('$invalid', 'JSON');
-         }
-       }
-
-       scope.$parseModel = function() {
-         this.$viewValue = angular.toJson(this.$modelValue);
-       }
-     });
-
-     function Ctrl($scope) {
-       $scope.data = {
-         framework:'angular',
-         codenames:'supper-powers'
-       }
-       $scope.required = false;
-       $scope.disabled = false;
-       $scope.readonly = false;
-     }
-   </script>
-   <div ng:controller="Ctrl">
-     <form name="myForm">
-       <input type="json" ng:model="data" size="80"
-              ng:required="{{required}}" ng:disabled="{{disabled}}"
-              ng:readonly="{{readonly}}"/><br/>
-       Required: <input type="checkbox" ng:model="required"> <br/>
-       Disabled: <input type="checkbox" ng:model="disabled"> <br/>
-       Readonly: <input type="checkbox" ng:model="readonly"> <br/>
-      <pre>data={{data}}</pre>
-       <pre>myForm={{myForm}}</pre>
-     </form>
-   </div>
-</doc:source>
-<doc:scenario>
-  it('should invalidate on wrong input', function() {
-    expect(element('form[name=myForm]').prop('className')).toMatch('ng-valid');
-    input('data').enter('{}');
-    expect(binding('data')).toEqual('{}');
-    input('data').enter('{');
-    expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid');
-  });
-</doc:scenario>
-</doc:example>
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc
index 58a8dfd5..3e3b2d28 100644
--- a/docs/content/cookbook/advancedform.ngdoc
+++ b/docs/content/cookbook/advancedform.ngdoc
@@ -52,7 +52,7 @@ detection, and preventing invalid form submission.
      };
 
      $scope.isSaveDisabled = function() {
-       return $scope.myForm.$invalid || angular.equals(master, $scope.form);
+       return $scope.myForm.invalid || angular.equals(master, $scope.form);
      };
 
      $scope.cancel();
diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc
index 5a6fe54e..97d82bb1 100644
--- a/docs/content/guide/dev_guide.forms.ngdoc
+++ b/docs/content/guide/dev_guide.forms.ngdoc
@@ -138,7 +138,7 @@ The following example demonstrates:
      };
 
      $scope.isSaveDisabled = function() {
-       return $scope.userForm.$invalid || angular.equals($scope.master, $scope.form);
+       return $scope.userForm.invalid || angular.equals($scope.master, $scope.form);
      };
 
      $scope.cancel();
@@ -150,7 +150,7 @@ The following example demonstrates:
 
        <label>Name:</label><br/>
        <input type="text" name="customer" ng:model="form.customer" required/>
-       <span class="error" ng:show="userForm.customer.$error.REQUIRED">
+       <span class="error" ng:show="userForm.customer.error.REQUIRED">
          Customer name is required!</span>
        <br/><br/>
 
@@ -165,15 +165,15 @@ The following example demonstrates:
          <input type="text" name="zip" ng:pattern="zip" size="5" required
                 ng:model="form.address.zip"/><br/><br/>
 
-         <span class="error" ng:show="addressForm.$invalid">
+         <span class="error" ng:show="addressForm.invalid">
            Incomplete address:
-           <span class="error" ng:show="addressForm.state.$error.REQUIRED">
+           <span class="error" ng:show="addressForm.state.error.REQUIRED">
              Missing state!</span>
-           <span class="error" ng:show="addressForm.state.$error.PATTERN">
+           <span class="error" ng:show="addressForm.state.error.PATTERN">
              Invalid state!</span>
-           <span class="error" ng:show="addressForm.zip.$error.REQUIRED">
+           <span class="error" ng:show="addressForm.zip.error.REQUIRED">
              Missing zip!</span>
-           <span class="error" ng:show="addressForm.zip.$error.PATTERN">
+           <span class="error" ng:show="addressForm.zip.error.PATTERN">
              Invalid zip!</span>
          </span>
        </ng:form>
@@ -284,56 +284,38 @@ This example shows how to implement a custom HTML editor widget in Angular.
             $scope.htmlContent = '<b>Hello</b> <i>World</i>!';
           }
 
-          HTMLEditorWidget.$inject = ['$scope', '$element', '$sanitize'];
-          function HTMLEditorWidget(scope, element, $sanitize) {
-            scope.$parseModel = function() {
-              // need to protect for script injection
-              try {
-                scope.$viewValue = $sanitize(
-                  scope.$modelValue || '');
-                if (this.$error.HTML) {
-                  // we were invalid, but now we are OK.
-                  scope.$emit('$valid', 'HTML');
-                }
-              } catch (e) {
-                // if HTML not parsable invalidate form.
-                scope.$emit('$invalid', 'HTML');
-              }
-            }
+          angular.module('formModule', []).directive('ngHtmlEditor', function ($sanitize) {
+            return {
+              require: 'ngModel',
+              link: function(scope, elm, attr, ctrl) {
+                attr.$set('contentEditable', true);
 
-            scope.$render = function() {
-              element.html(this.$viewValue);
-            }
+                ctrl.$render = function() {
+                  elm.html(ctrl.viewValue);
+                };
 
-            element.bind('keyup', function() {
-              scope.$apply(function() {
-                scope.$emit('$viewChange', element.html());
-              });
-            });
-          }
+                ctrl.formatters.push(function(value) {
+                  try {
+                    value = $sanitize(value || '');
+                    ctrl.emitValidity('HTML', true);
+                  } catch (e) {
+                    ctrl.emitValidity('HTML', false);
+                  }
+
+                });
 
-          angular.module('formModule', [], function($compileProvider){
-            $compileProvider.directive('ngHtmlEditorModel', function ($formFactory) {
-              return function(scope, element, attr) {
-                var form = $formFactory.forElement(element),
-                    widget;
-                element.attr('contentEditable', true);
-                widget = form.$createWidget({
-                  scope: scope,
-                  model: attr.ngHtmlEditorModel,
-                  controller: HTMLEditorWidget,
-                  controllerArgs: {$element: element}});
-                // if the element is destroyed, then we need to
-                // notify the form.
-                element.bind('$destroy', function() {
-                  widget.$destroy();
+                elm.bind('keyup', function() {
+                  scope.$apply(function() {
+                    ctrl.read(elm.html());
+                  });
                 });
-              };
-            });
+
+              }
+            };
           });
         </script>
         <form name='editorForm' ng:controller="EditorCntl">
-          <div ng:html-editor-model="htmlContent"></div>
+          <div ng:html-editor ng:model="htmlContent"></div>
           <hr/>
           HTML: <br/>
           <textarea ng:model="htmlContent" cols="80"></textarea>
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index 93d8cdda..46a77da3 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -101,7 +101,7 @@
 
     <div id="sidebar">
       <input type="text" ng:model="search" id="search-box" placeholder="search the docs"
-             tabindex="1" accesskey="s">
+             tabindex="1" accesskey="s" ng:bind-immediate>
 
       <ul id="content-list" ng:class="sectionId" ng:cloak>
         <li ng:repeat="page in pages | filter:search" ng:class="getClass(page)">
-- 
cgit v1.2.3