From 823adb231995e917bc060bfa49453e2a96bac2b6 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Thu, 15 Mar 2012 14:08:49 -0700 Subject: [PATCH] fix(ngForm): alias name||ngForm form directive was requiring name attribute even when invoked as attribute, resulting in unnecessary duplication --- src/directive/form.js | 60 +++++++++++++++++++++++++------------- test/directive/formSpec.js | 20 +++++++++---- 2 files changed, 54 insertions(+), 26 deletions(-) diff --git a/src/directive/form.js b/src/directive/form.js index 98c291d41618..b6d3f4be14b8 100644 --- a/src/directive/form.js +++ b/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 `
` elements, for this - * reason angular provides `` alias which behaves identical to `` but allows - * element nesting. + * reason angular provides {@link angular.module.ng.$compileProvider.directive.ng-form `ng-form`} alias + * which behaves identical to `` but allows form nesting. * * * # CSS classes @@ -218,25 +230,31 @@ function FormController(name, element, attrs) { */ -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'})); diff --git a/test/directive/formSpec.js b/test/directive/formSpec.js index ec16e19bd531..5c34b5ad34dd 100644 --- a/test/directive/formSpec.js +++ b/test/directive/formSpec.js @@ -33,9 +33,9 @@ describe('form', function() { it('should remove the widget when element removed', function() { doc = $compile( - '' + - '' + - '')(scope); + '
' + + '' + + '
')(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( + '
' + + '' + + '
')(scope); + + expect(scope.myForm).toBeDefined(); + expect(scope.myForm.alias).toBeDefined(); + }); + + it('should prevent form submission', function() { var startingUrl = '' + window.location; doc = jqLite('
'); @@ -89,8 +100,7 @@ describe('form', function() { it('should allow form name to be an expression', function() { doc = $compile('
')(scope); - expect(scope.obj).toBeDefined(); - expect(scope.obj.myForm).toBeTruthy(); + expect(scope['obj.myForm']).toBeTruthy(); });