feat(forms): new and improved forms

4 files changed, 49 insertions, 77 deletions

diff --git a/docs/src/ngdoc.js b/docs/src/ngdoc.js
index 8a20e64a..1a4f5d25 100644
--- a/docs/src/ngdoc.js
+++ b/docs/src/ngdoc.js
@@ -13,6 +13,11 @@ exports.scenarios = scenarios;
 exports.merge = merge;
 exports.Doc = Doc;
 
+var BOOLEAN_ATTR = {};
+['multiple', 'selected', 'checked', 'disabled', 'readOnly', 'required'].forEach(function(value, key) {
+  BOOLEAN_ATTR[value] = true;
+});
+
 //////////////////////////////////////////////////////////
 function Doc(text, file, line) {
   if (typeof text == 'object') {
@@ -385,69 +390,21 @@ Doc.prototype = {
     });
   },
 
-  html_usage_formatter: function(dom){
-    var self = this;
-    dom.h('Usage', function(){
-      dom.h('In HTML Template Binding', function(){
-        dom.code(function(){
-          if (self.inputType=='select')
-            dom.text('<select name="bindExpression"');
-          else
-            dom.text('<input type="text" name="bindExpression"');
-          dom.text(' ng:format="');
-          dom.text(self.shortName);
-          self.parameters(dom, ':', false, true);
-          dom.text('">');
-        });
-      });
-
-      dom.h('In JavaScript', function(){
-        dom.code(function(){
-          dom.text('var userInputString = angular.formatter.');
-          dom.text(self.shortName);
-          dom.text('.format(modelValue');
-          self.parameters(dom, ', ', false, true);
-          dom.text(');');
-          dom.text('\n');
-          dom.text('var modelValue = angular.formatter.');
-          dom.text(self.shortName);
-          dom.text('.parse(userInputString');
-          self.parameters(dom, ', ', false, true);
-          dom.text(');');
-        });
-      });
-
-      self.html_usage_parameters(dom);
-      self.html_usage_this(dom);
-      self.html_usage_returns(dom);
-    });
-  },
-
-  html_usage_validator: function(dom){
+  html_usage_inputType: function(dom){
     var self = this;
     dom.h('Usage', function(){
-      dom.h('In HTML Template Binding', function(){
-        dom.code(function(){
-          dom.text('<input type="text" ng:validate="');
-          dom.text(self.shortName);
-          self.parameters(dom, ':', true);
-          dom.text('"/>');
-        });
-      });
-
-      dom.h('In JavaScript', function(){
-        dom.code(function(){
-          dom.text('angular.validator.');
-          dom.text(self.shortName);
-          dom.text('(');
-          self.parameters(dom, ', ');
-          dom.text(')');
+      dom.code(function(){
+        dom.text('<input type="' + self.shortName + '"');
+        (self.param||[]).forEach(function(param){
+          dom.text('\n      ');
+          dom.text(param.optional ? ' [' : ' ');
+          dom.text(param.name);
+          dom.text(BOOLEAN_ATTR[param.name] ? '' : '="..."');
+          dom.text(param.optional ? ']' : '');
         });
+        dom.text('>');
       });
-
       self.html_usage_parameters(dom);
-      self.html_usage_this(dom);
-      self.html_usage_returns(dom);
     });
   },
 
@@ -473,11 +430,11 @@ Doc.prototype = {
             dom.text('<');
             dom.text(self.shortName);
             (self.param||[]).forEach(function(param){
-              if (param.optional) {
-                dom.text(' [' + param.name + '="..."]');
-              } else {
-                dom.text(' ' + param.name + '="..."');
-              }
+              dom.text('\n      ');
+              dom.text(param.optional ? ' [' : ' ');
+              dom.text(param.name);
+              dom.text(BOOLEAN_ATTR[param.name] ? '' : '="..."');
+              dom.text(param.optional ? ']' : '');
             });
             dom.text('></');
             dom.text(self.shortName);
@@ -533,12 +490,18 @@ Doc.prototype = {
     dom.h('Events', this.events, function(event){
     dom.h(event.shortName, event, function(){
         dom.html(event.description);
-        dom.tag('div', {class:'inline'}, function(){
-          dom.h('Type:', event.type);
-        });
-        dom.tag('div', {class:'inline'}, function(){
-          dom.h('Target:', event.target);
-        });
+        if (event.type == 'listen') {
+          dom.tag('div', {class:'inline'}, function(){
+            dom.h('Listen on:', event.target);
+          });
+        } else {
+          dom.tag('div', {class:'inline'}, function(){
+            dom.h('Type:', event.type);
+          });
+          dom.tag('div', {class:'inline'}, function(){
+            dom.h('Target:', event.target);
+          });
+        }
         event.html_usage_parameters(dom);
         self.html_usage_this(dom);
 
@@ -632,10 +595,9 @@ var KEYWORD_PRIORITY = {
   '.angular.Object': 7,
   '.angular.directive': 7,
   '.angular.filter': 7,
-  '.angular.formatter': 7,
   '.angular.scope': 7,
   '.angular.service': 7,
-  '.angular.validator': 7,
+  '.angular.inputType': 7,
   '.angular.widget': 7,
   '.angular.mock': 8,
   '.dev_guide.overview': 1,
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
index 17284a1d..72f59f74 100644
--- a/docs/src/templates/doc_widgets.js
+++ b/docs/src/templates/doc_widgets.js
@@ -81,14 +81,16 @@
           fiddleSrc = fiddleSrc.replace(new RegExp('^\\s{' + stripIndent + '}', 'gm'), '');
 
           return '<form class="jsfiddle" method="post" action="' + fiddleUrl + '" target="_blank">' +
-                    '<textarea name="css">' +
+                    '<textarea ng:model="css">' +
+                      '.ng-invalid { border: 1px solid red; } \n' +
                       'body { font-family: Arial,Helvetica,sans-serif; }\n' +
                       'body, td, th { font-size: 14px; margin: 0; }\n' +
                       'table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }\n' +
                       'a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }\n' +
+                      '.error { color: red; }\n' +
                     '</textarea>' +
-                    '<input type="text" name="title" value="AngularJS Live Example">' +
-                    '<textarea name="html">' +
+                    '<input type="text" ng:model="title" value="AngularJS Live Example">' +
+                    '<textarea ng:model="html">' +
                       '<script src="' + angularJsUrl + '" ng:autobind></script>\n\n' +
                       '<!-- AngularJS Example Code: -->\n\n' +
                       fiddleSrc +
diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css
index 99ea7454..c38252ff 100644
--- a/docs/src/templates/docs.css
+++ b/docs/src/templates/docs.css
@@ -49,6 +49,10 @@ li {
   margin: 0.3em 0 0.3em 0;
 }
 
+.ng-invalid {
+  border: 1px solid red;
+}
+
 
 /*----- Upgrade IE Prompt -----*/
 
@@ -426,7 +430,7 @@ li {
 }
 
 table {
-	border-collapse: collapse;
+  border-collapse: collapse;
 }
 
 td {
@@ -448,7 +452,7 @@ td.empty-corner-lt {
 .html5-hashbang-example {
   height: 255px;
   margin-left: -40px;
-  padding-left: 30px; 
+  padding-left: 30px;
 }
 
 .html5-hashbang-example div {
@@ -459,3 +463,7 @@ td.empty-corner-lt {
 .html5-hashbang-example div input {
   width: 360px;
 }
+
+.error {
+   color: red;
+}
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index a2def7a6..87c27ac0 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -99,7 +99,7 @@
     </ul>
 
     <div id="sidebar">
-      <input type="text" name="search" id="search-box" placeholder="search the docs"
+      <input type="text" ng:model="search" id="search-box" placeholder="search the docs"
              tabindex="1" accesskey="s">
 
       <ul id="content-list" ng:class="sectionId" ng:cloak>