fix(ngForm): alias name||ngForm

form directive was requiring name attribute even when invoked as attribute, resulting in unnecessary duplication

Author: mhevery

src/directive/form.js

@@ -31,10 +31,10 @@ var nullFormCtrl = {
  * of `FormController`.
  *
  */
-FormController.$inject = ['name', '$element', '$attrs'];
-function FormController(name, element, attrs) {
+FormController.$inject = ['$element', '$attrs'];
+function FormController(element, attrs) {
   var form = this,
-      parentForm = element.parent().inheritedData('$formController') || nullFormCtrl,
+      parentForm = element.parent().controller('form') || nullFormCtrl,
       invalidCount = 0, // used to easily determine if we are valid
       errors = form.$error = {};
 
@@ -45,9 +45,6 @@ function FormController(name, element, attrs) {
   form.$valid = true;
   form.$invalid = false;
 
-  // publish the form into scope
-  name(this);
-
   parentForm.$addControl(form);
 
   // Setup initial state of the control
@@ -130,9 +127,24 @@ function FormController(name, element, attrs) {
 
 
 /**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng-form
+ * @restrict EAC
+ *
+ * @description
+ * Nestable alias of {@link angular.module.ng.$compileProvider.directive.form `form`} directive. HTML
+ * does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a
+ * sub-group of controls needs to be determined.
+ *
+ * @param {string=} ng-form|name Name of the form. If specified, the form controller will be published into
+ *                       related scope, under this name.
+ *
+ */
+
+ /**
  * @ngdoc directive
  * @name angular.module.ng.$compileProvider.directive.form
- * @restrict EA
+ * @restrict E
  *
  * @description
  * Directive that instantiates
@@ -141,12 +153,12 @@ function FormController(name, element, attrs) {
  * If `name` attribute is specified, the form controller is published onto the current scope under
  * this name.
  *
- * # Alias: `ng-form`
+ * # Alias: {@link angular.module.ng.$compileProvider.directive.ng-form `ng-form`}
  *
  * In angular forms can be nested. This means that the outer form is valid when all of the child
  * forms are valid as well. However browsers do not allow nesting of `<form>` elements, for this
- * reason angular provides `<ng-form>` alias which behaves identical to `<form>` but allows
- * element nesting.
+ * reason angular provides {@link angular.module.ng.$compileProvider.directive.ng-form `ng-form`} alias
+ * which behaves identical to `<form>` but allows form nesting.
  *
  *
  * # CSS classes
@@ -218,25 +230,31 @@ function FormController(name, element, attrs) {
       </doc:scenario>
     </doc:example>
  */
-var formDirectiveDev = {
+var formDirectiveDir = {
   name: 'form',
   restrict: 'E',
-  inject: {
-    name: 'accessor'
-  },
   controller: FormController,
   compile: function() {
     return {
       pre: function(scope, formElement, attr, controller) {
-        formElement.bind('submit', function(event) {
-          if (!attr.action) event.preventDefault();
-        });
+        if (!attr.action) {
+          formElement.bind('submit', function(event) {
+            event.preventDefault();
+          });
+        }
+
+        var parentFormCtrl = formElement.parent().controller('form'),
+            alias = attr.name || attr.ngForm;
 
-        var parentFormCtrl = formElement.parent().inheritedData('$formController');
+        if (alias) {
+          scope[alias] = controller;
+        }
         if (parentFormCtrl) {
           formElement.bind('$destroy', function() {
             parentFormCtrl.$removeControl(controller);
-            if (attr.name) delete scope[attr.name];
+            if (alias) {
+              scope[alias] = undefined;
+            }
             extend(controller, nullFormCtrl); //stop propagating child destruction handlers upwards
           });
         }
@@ -245,5 +263,5 @@ var formDirectiveDev = {
   }
 };
 
-var formDirective = valueFn(formDirectiveDev);
-var ngFormDirective = valueFn(extend(copy(formDirectiveDev), {restrict:'EAC'}));
+var formDirective = valueFn(formDirectiveDir);
+var ngFormDirective = valueFn(extend(copy(formDirectiveDir), {restrict: 'EAC'}));

test/directive/formSpec.js

@@ -33,9 +33,9 @@ describe('form', function() {
 
   it('should remove the widget when element removed', function() {
     doc = $compile(
-        '<form name="myForm">' +
-          '<input type="text" name="alias" ng-model="value" store-model-ctrl/>' +
-        '</form>')(scope);
+      '<form name="myForm">' +
+        '<input type="text" name="alias" ng-model="value" store-model-ctrl/>' +
+      '</form>')(scope);
 
     var form = scope.myForm;
     control.$setValidity('required', false);
@@ -48,6 +48,17 @@ describe('form', function() {
   });
 
 
+  it('should use ng-form as form name', function() {
+    doc = $compile(
+      '<div ng-form="myForm">' +
+        '<input type="text" name="alias" ng-model="value"/>' +
+      '</div>')(scope);
+
+    expect(scope.myForm).toBeDefined();
+    expect(scope.myForm.alias).toBeDefined();
+  });
+
+
   it('should prevent form submission', function() {
     var startingUrl = '' + window.location;
     doc = jqLite('<form name="myForm"><input type="submit" value="submit" />');
@@ -89,8 +100,7 @@ describe('form', function() {
   it('should allow form name to be an expression', function() {
     doc = $compile('<form name="obj.myForm"></form>')(scope);
 
-    expect(scope.obj).toBeDefined();
-    expect(scope.obj.myForm).toBeTruthy();
+    expect(scope['obj.myForm']).toBeTruthy();
   });