fix(forms): update value and validity when controls are added

Closes #8826

modules/@angular/common/src/forms-deprecated/directives/ng_form.ts

@@ -115,7 +115,7 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       var ctrl = new Control();
       setUpControl(ctrl, dir);
-      container.addControl(dir.name, ctrl);
+      container.registerControl(dir.name, ctrl);
       ctrl.updateValueAndValidity({emitEvent: false});
     });
   }
@@ -127,7 +127,6 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       if (isPresent(container)) {
         container.removeControl(dir.name);
-        container.updateValueAndValidity({emitEvent: false});
       }
     });
   }
@@ -137,7 +136,7 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       var group = new ControlGroup({});
       setUpControlGroup(group, dir);
-      container.addControl(dir.name, group);
+      container.registerControl(dir.name, group);
       group.updateValueAndValidity({emitEvent: false});
     });
   }
@@ -147,7 +146,6 @@ export class NgForm extends ControlContainer implements Form {
       var container = this._findContainer(dir.path);
       if (isPresent(container)) {
         container.removeControl(dir.name);
-        container.updateValueAndValidity({emitEvent: false});
       }
     });
   }

modules/@angular/common/src/forms-deprecated/model.ts

@@ -350,17 +350,28 @@ export class ControlGroup extends AbstractControl {
   }
 
   /**
-   * Add a control to this group.
+   * Register a control with the group's list of controls.
    */
-  addControl(name: string, control: AbstractControl): void {
+  registerControl(name: string, control: AbstractControl): void {
     this.controls[name] = control;
     control.setParent(this);
   }
 
+  /**
+   * Add a control to this group.
+   */
+  addControl(name: string, control: AbstractControl): void {
+    this.registerControl(name, control);
+    this.updateValueAndValidity();
+  }
+
   /**
    * Remove a control from this group.
    */
-  removeControl(name: string): void { StringMapWrapper.delete(this.controls, name); }
+  removeControl(name: string): void {
+    StringMapWrapper.delete(this.controls, name);
+    this.updateValueAndValidity();
+  }
 
   /**
    * Mark the named control as non-optional.

modules/@angular/common/test/forms-deprecated/model_spec.ts

@@ -351,6 +351,33 @@ export function main() {
         });
       });
 
+      describe("adding and removing controls", () => {
+        it("should update value and validity when control is added", () => {
+          var g = new ControlGroup({ "one": new Control("1") });
+          expect(g.value).toEqual({"one": "1"});
+          expect(g.valid).toBe(true);
+
+          g.addControl("two", new Control("2", Validators.minLength(10)));
+
+          expect(g.value).toEqual({"one": "1","two": "2"});
+          expect(g.valid).toBe(false);
+        });
+
+        it("should update value and validity when control is removed", () => {
+          var g = new ControlGroup({
+            "one": new Control("1"),
+            "two": new Control("2", Validators.minLength(10))
+          });
+          expect(g.value).toEqual({"one": "1", "two": "2"});
+          expect(g.valid).toBe(false);
+
+          g.removeControl("two");
+
+          expect(g.value).toEqual({"one": "1"});
+          expect(g.valid).toBe(true);
+        });
+      });
+
       describe("errors", () => {
         it("should run the validator when the value changes", () => {
           var simpleValidator = (c) =>

tools/public_api_guard/public_api_spec.ts

@@ -771,6 +771,7 @@ const COMMON = [
   'ControlGroup.controls:{[key:string]:AbstractControl}',
   'ControlGroup.exclude(controlName:string):void',
   'ControlGroup.include(controlName:string):void',
+  'ControlGroup.registerControl(name:string, control:AbstractControl):void',
   'ControlGroup.removeControl(name:string):void',
   'ControlValueAccessor',
   'ControlValueAccessor.registerOnChange(fn:any):void',