merged jhr007s newFeatures pull request

Author: ghelton

dist/formly.js

@@ -89,14 +89,24 @@ angular.module('formly.render').directive('formlyForm', function formlyForm() {
       formId: '@formId',
       fields: '=fields',
       options: '=options',
-      result: '=result'
+      result: '=result',
+      formOnParentScope: '=name'
     },
     controller: [
       '$scope',
       '$element',
       function formController($scope, $element) {
       }
-    ]
+    ],
+    compile: function (scope, iElement, iAttrs, controller, transcludeFn) {
+      return {
+        post: function (scope, ele, attr, controller) {
+          //Post gets called after angular has created the FormController
+          //Now pass the FormController back up to the parent scope
+          scope.formOnParentScope = scope[attr.name];
+        }
+      };
+    }
   };
 });
 angular.module('formly.render').run([
@@ -113,6 +123,6 @@ angular.module('formly.render').run([
     $templateCache.put('directives/formly-field-text.html', '<div class=form-group><label for={{id}}>{{options.label || \'Text\'}} {{options.required ? \'*\' : \'\'}}</label><input class=form-control id={{id}} placeholder={{options.placeholder}} ng-required=options.required ng-disabled=options.disabled ng-model=value></div>');
     $templateCache.put('directives/formly-field-textarea.html', '<div class=form-group><label for={{id}}>{{options.label || \'Text\'}} {{options.required ? \'*\' : \'\'}}</label><textarea type=text class=form-control id={{id}} rows={{options.lines}} placeholder={{options.placeholder}} ng-required=options.required ng-disabled=options.disabled ng-model=value>\n' + '\t</textarea></div>');
     $templateCache.put('directives/formly-field.html', '');
-    $templateCache.put('directives/formly-form.html', '<form class=formly role=form name={{options.uniqueFormId}}><formly-field ng-repeat="field in fields" options=field form-value=result[field.key||$index] class=formly-field form-id={{options.uniqueFormId}} index={{$index}}></formly-field><button type=submit ng-hide=options.hideSubmit>{{options.submitCopy || "Submit"}}</button></form>');
+    $templateCache.put('directives/formly-form.html', '<form class=formly role=form><formly-field ng-repeat="field in fields" options=field form-value=result[field.key||$index] class=formly-field form-id={{options.uniqueFormId}} index={{$index}}></formly-field><button type=submit ng-hide=options.hideSubmit>{{options.submitCopy || "Submit"}}</button></form>');
   }
 ]);

dist/formly.min.js

@@ -1,4 +1,4 @@
-<form class="formly" role="form" name="{{options.uniqueFormId}}">
+<form class="formly" role="form">
 	<formly-field ng-repeat="field in fields"
 				  options="field"
 				  form-value="result[field.key||$index]"

dist/formly.min.map

@@ -9,10 +9,19 @@ angular.module('formly.render')
 			formId: '@formId',
 			fields: '=fields',
 			options: '=options',
-			result: '=result'
+			result: '=result',
+			formOnParentScope: '=name'
 		},
 		controller: function formController($scope, $element) {
-
+		},
+		compile: function (scope, iElement, iAttrs, controller, transcludeFn) {
+			return {
+				post: function (scope, ele, attr, controller) {
+					//Post gets called after angular has created the FormController
+					//Now pass the FormController back up to the parent scope
+					scope.formOnParentScope = scope[attr.name];
+				}
+			}
 		}
 	};
 });

src/directives/formly-form.html

@@ -57,17 +57,50 @@ <h3>Fields</h3>
 		<div class="col-sm-4 col-md-4 col-lg-4">
 
 			<h3>Form</h3>
-			<formly-form result="formData"
+			<formly-form name="myFormName"
+                    	 result="formData"
 						 fields="formFields"
 						 options="formOptions"
 						 ng-submit="onSubmit()">
 			</formly-form>
 		</div>
 		<div class="col-sm-4 col-md-4 col-lg-4">
 
-			<h3>Form Data</h3>
+			<h3>Submitted Data</h3>
+			<div hljs source="formData|json"></div>
 
-			<div hljs source="toPrettyJSON(formData, 4)"></div>
+            <h3>Form State</h3>
+            <table class="table table-condensed">
+                <thead>
+                <tr>
+                    <th>State</th>
+                    <th>Value</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>$pristine</td>
+                    <td>{{myFormName.$pristine}}</td>
+                </tr>
+                <tr>
+                    <td>$dirty</td>
+                    <td>{{myFormName.$dirty}}</td>
+                </tr>
+                <tr>
+                    <td>$valid</td>
+                    <td>{{myFormName.$valid}}</td>
+                </tr>
+                <tr>
+                    <td>$invalid</td>
+                    <td>{{myFormName.$invalid}}</td>
+                </tr>
+                <tr>
+                    <td>$error</td>
+                    <td>{{myFormName.$error}}</td>
+                </tr>
+                </tbody>
+
+            </table>
 		</div>
 	</div>
 </div>

src/directives/formly-form.js

@@ -34,26 +34,30 @@ app.controller('home', function($scope, $parse, $rootScope) {
 			$scope.formOptionsError = true;
 		}
 	});
-	
+
 	// Public Vars
 	$scope.formFields = [{
-		type: 'email',
-		placeholder: '[email protected]',
-		key: 'email'
-	}, {
+		key: 'firstName',
 		type: 'text',
 		label: 'First Name',
 		placeholder: 'Jane'
 	}, {
+		key: 'lastName',
 		type: 'text',
 		label: 'Last Name',
 		placeholder: 'Doe'
 	}, {
+		key: 'email',
+		type: 'email',
+		placeholder: '[email protected]'
+	}, {
+		key: 'about',
 		type: 'textarea',
 		label: 'Tell me about yourself',
 		placeholder: 'I like puppies',
 		lines: 4
 	}, {
+		key: 'triedEmber',
 		type: 'radio',
 		label: 'Have you tried EmberJs yet?',
 		default: 'no',
@@ -70,19 +74,22 @@ app.controller('home', function($scope, $parse, $rootScope) {
 			}
 		]
 	}, {
+		key: 'angularFan',
 		type: 'text',
 		label: 'Angular Fan?',
 		disabled: true,
 		default: 'yes',
 		required: true
 	}, {
+		key: 'love',
 		type: 'number',
 		label: 'How much love?',
 		default: 2,
 		min: 0,
 		max: 100,
 		required: true
 	}, {
+		key: 'transportation',
 		type: 'select',
 		label: 'How do you get around in the city',
 		options: [
@@ -119,17 +126,20 @@ app.controller('home', function($scope, $parse, $rootScope) {
 			}
 		]
 	}, {
+		key: 'password',
 		type: 'password',
 		label: 'Password'
 	}, {
+		key: 'checkThis',
 		type: 'checkbox',
 		label: 'Check this here'
 	}, {
+		key:'secretCode',
 		type: 'hidden',
 		default: 'secret_code'
 	}];
+
 	$scope.formOptions = {
-		uniqueFormId: 'simpleform',
 		submitCopy: 'Save'
 	};
 	$scope.submittedData = null;