feat(forms): new and improved forms

3 files changed, 16 insertions, 6 deletions

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>