Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

feat(form.FormController): add $getControls() #16601

Merged
merged 3 commits into from
Jun 18, 2018
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/ng/directive/form.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
var nullFormCtrl = {
$addControl: noop,
$getControls: noop,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should return an empty array (to respect the "contract" that $getControls() returns an array).
Maybe change it to valueFn([]).

$$renameControl: nullFormRenameControl,
$removeControl: noop,
$setValidity: noop,
Expand Down Expand Up @@ -159,6 +160,28 @@ FormController.prototype = {
control.$$parentForm = this;
},

/**
* @ngdoc method
* @name form.FormController#$getControls
* @returns {Array} the controls that are currently part of this form
*
* @description
* This method returns a **shallow copy** of the controls that are currently part of this form
* ({@link form.FormController `FormController`} /
* {@link ngModel.NgModelController `NgModelController`}) . This can be used
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume here you refer to the fact that the controls can be either FormController or NgModelController instances. Having this parenthesis after "of this form" is a little confusing.

I think it makes sense to be more explicit about this in the docs (because not all people might realize controls can actually be other FormControllers) and also mention that if you want nested controls, you have to recursively call $getControls() on sub-forms.

* for example to iterate over all controls to validate them.
*
* The controls can be accessed normally, but adding or removing controls from the array has no
* effect on the form. Instead, use {@link form.FormController#$addControl `$addControl()`} and
* {@link form.FormController#$removeControl `$removeControl()`}.
* Likewise, adding a control to / removing a control from the form is not reflected
* in the shallow copy. That means you should get a fresh copy from `$getControls` every time
* you need access to the controls.
*/
$getControls: function() {
return shallowCopy(this.$$controls);
},

// Private API: rename a form control
$$renameControl: function(control, newName) {
var oldName = control.$name;
Expand Down
36 changes: 36 additions & 0 deletions test/ng/directive/formSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -1200,6 +1200,42 @@ describe('form', function() {
});
});

fdescribe('$getControls', function() {
it('should return a shallow copy of the form controls', function() {
doc = $compile(
'<form name="testForm">' +
'<input ng-model="named" name="foo">' +
'<div ng-form>' +
'<input ng-model="named" name="foo">' +
'</div>' +
'</form>')(scope);

scope.$digest();

var form = doc,
formCtrl = scope.testForm,
formInput = form.children('input').eq(0),
formInputCtrl = formInput.controller('ngModel'),
nestedForm = form.find('div'),
nestedFormCtrl = nestedForm.controller('form'),
nestedInput = nestedForm.children('input').eq(0),
nestedInputCtrl = nestedInput.controller('ngModel');

var controls = formCtrl.$getControls();

expect(controls).not.toBe(formCtrl.$$controls);

controls.push('something');
expect(formCtrl.$$controls).not.toContain('something');

expect(controls[0]).toBe(formInputCtrl);
expect(controls[1]).toBe(nestedFormCtrl);

var nestedControls = controls[1].$getControls();

expect(nestedControls[0]).toBe(nestedInputCtrl);
});
});

it('should rename nested form controls when interpolated name changes', function() {
scope.idA = 'A';
Expand Down