feat(input): rename form controls when name is updated

Author: caitp

src/ng/directive/form.js

@@ -4,6 +4,7 @@
  */
 var nullFormCtrl = {
   $addControl: noop,
+  $$renameControl: noop,
   $removeControl: noop,
   $setValidity: noop,
   $$setPending: noop,
@@ -127,6 +128,23 @@ function FormController(element, attrs, $scope, $animate) {
     }
   };
 
+  // Private API: rename a form control
+  form.$$renameControl = function(control, newName) {
+    var oldName = control.$name;
+
+    if (form[oldName] === control) {
+      form[newName] = form[oldName];
+      delete form[oldName];
+      control.$name = newName;
+    } else if (controls.indexOf(control) !== -1) {
+      // The oldName is not the same as this form control, but this form control is in the form
+      // somewhere... So just update the newName. This potentially creates 2 references to the same
+      // control.
+      form[newName] = control;
+      control.$name = newName;
+    }
+  };
+
   /**
    * @ngdoc method
    * @name form.FormController#$removeControl

src/ng/directive/input.js

@@ -2387,6 +2387,12 @@ var ngModelDirective = function() {
         // notify others, especially parent forms
         formCtrl.$addControl(modelCtrl);
 
+        attr.$observe('name', function(newValue) {
+          if (modelCtrl.$name !== newValue) {
+            formCtrl.$$renameControl(modelCtrl, newValue);
+          }
+        });
+
         scope.$on('$destroy', function() {
           formCtrl.$removeControl(modelCtrl);
         });

test/ng/directive/inputSpec.js

@@ -1317,6 +1317,19 @@ describe('input', function() {
   });
 
 
+  it('should rename form controls in form when interpolated name changes', function() {
+    scope.nameID = "A";
+    compileInput('<input type="text" ng-model="name" name="name{{nameID}}" />');
+    expect(scope.form.nameA.$name).toBe('nameA');
+    var oldModel = scope.form.nameA;
+    scope.nameID = "B";
+    scope.$digest();
+    expect(scope.form.nameA).toBeUndefined();
+    expect(scope.form.nameB).toBe(oldModel);
+    expect(scope.form.nameB.$name).toBe('nameB');
+  });
+
+
   describe('"change" event', function() {
     function assertBrowserSupportsChangeEvent(inputEventSupported) {
       // Force browser to report a lack of an 'input' event