From 7d9c1e122534ff49b2ce6611876fa4578a69fe1d Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Fri, 10 Jun 2016 19:10:17 -0700
Subject: [PATCH] chore(forms): rename ngFormModel to formGroup

---
 modules/@angular/common/src/forms.ts          |   6 +-
 .../@angular/common/src/forms/directives.ts   |  13 +-
 .../src/forms/directives/form_interface.ts    |   4 +-
 .../src/forms/directives/ng_control_group.ts  |   4 +-
 .../src/forms/directives/ng_control_name.ts   |   4 +-
 .../common/src/forms/directives/ng_form.ts    |   2 +-
 .../form_control_directive.ts                 |  16 +-
 .../form_group_directive.ts}                  |  51 +++---
 .../@angular/common/src/forms/form_builder.ts |   4 +-
 modules/@angular/common/src/forms/model.ts    |   4 +-
 .../common/test/forms/directives_spec.ts      |  14 +-
 .../common/test/forms/integration_spec.ts     | 157 +++++++++---------
 12 files changed, 138 insertions(+), 141 deletions(-)
 rename modules/@angular/common/src/forms/directives/{ => reactive_directives}/form_control_directive.ts (88%)
 rename modules/@angular/common/src/forms/directives/{ng_form_model.ts => reactive_directives/form_group_directive.ts} (78%)

diff --git a/modules/@angular/common/src/forms.ts b/modules/@angular/common/src/forms.ts
index 71e0828532..7acbbe1e5a 100644
--- a/modules/@angular/common/src/forms.ts
+++ b/modules/@angular/common/src/forms.ts
@@ -16,21 +16,21 @@ import {Type} from '@angular/core';
 import {RadioControlRegistry} from './forms/directives/radio_control_value_accessor';
 import {FormBuilder} from './forms/form_builder';
 
-export {FORM_DIRECTIVES, RadioButtonState} from './forms/directives';
+export {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, RadioButtonState} from './forms/directives';
 export {AbstractControlDirective} from './forms/directives/abstract_control_directive';
 export {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_accessor';
 export {ControlContainer} from './forms/directives/control_container';
 export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './forms/directives/control_value_accessor';
 export {DefaultValueAccessor} from './forms/directives/default_value_accessor';
-export {FormControlDirective} from './forms/directives/form_control_directive';
 export {Form} from './forms/directives/form_interface';
 export {NgControl} from './forms/directives/ng_control';
 export {NgControlGroup} from './forms/directives/ng_control_group';
 export {NgControlName} from './forms/directives/ng_control_name';
 export {NgControlStatus} from './forms/directives/ng_control_status';
 export {NgForm} from './forms/directives/ng_form';
-export {NgFormModel} from './forms/directives/ng_form_model';
 export {NgModel} from './forms/directives/ng_model';
+export {FormControlDirective} from './forms/directives/reactive_directives/form_control_directive';
+export {FormGroupDirective} from './forms/directives/reactive_directives/form_group_directive';
 export {NgSelectOption, SelectControlValueAccessor} from './forms/directives/select_control_value_accessor';
 export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator} from './forms/directives/validators';
 export {FormBuilder} from './forms/form_builder';
diff --git a/modules/@angular/common/src/forms/directives.ts b/modules/@angular/common/src/forms/directives.ts
index 9ba4ab936f..0cc0993951 100644
--- a/modules/@angular/common/src/forms/directives.ts
+++ b/modules/@angular/common/src/forms/directives.ts
@@ -2,15 +2,15 @@ import {Type} from '@angular/core';
 
 import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
 import {DefaultValueAccessor} from './directives/default_value_accessor';
-import {FormControlDirective} from './directives/form_control_directive';
 import {NgControlGroup} from './directives/ng_control_group';
 import {NgControlName} from './directives/ng_control_name';
 import {NgControlStatus} from './directives/ng_control_status';
 import {NgForm} from './directives/ng_form';
-import {NgFormModel} from './directives/ng_form_model';
 import {NgModel} from './directives/ng_model';
 import {NumberValueAccessor} from './directives/number_value_accessor';
 import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+import {FormControlDirective} from './directives/reactive_directives/form_control_directive';
+import {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
 import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
 import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
 import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
@@ -18,16 +18,16 @@ import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
 export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
 export {ControlValueAccessor} from './directives/control_value_accessor';
 export {DefaultValueAccessor} from './directives/default_value_accessor';
-export {FormControlDirective} from './directives/form_control_directive';
 export {NgControl} from './directives/ng_control';
 export {NgControlGroup} from './directives/ng_control_group';
 export {NgControlName} from './directives/ng_control_name';
 export {NgControlStatus} from './directives/ng_control_status';
 export {NgForm} from './directives/ng_form';
-export {NgFormModel} from './directives/ng_form_model';
 export {NgModel} from './directives/ng_model';
 export {NumberValueAccessor} from './directives/number_value_accessor';
 export {RadioButtonState, RadioControlValueAccessor} from './directives/radio_control_value_accessor';
+export {FormControlDirective} from './directives/reactive_directives/form_control_directive';
+export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
 export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
 export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
 export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
@@ -54,7 +54,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
 export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
   NgControlName, NgControlGroup,
 
-  NgModel, NgFormModel, NgForm,
+  NgModel, NgForm,
 
   NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
   CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
@@ -62,3 +62,6 @@ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
 
   RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator
 ];
+
+export const REACTIVE_FORM_DIRECTIVES: Type[] =
+    /*@ts2dart_const*/[FormControlDirective, FormGroupDirective];
\ No newline at end of file
diff --git a/modules/@angular/common/src/forms/directives/form_interface.ts b/modules/@angular/common/src/forms/directives/form_interface.ts
index 4d1b481540..511c0a4af9 100644
--- a/modules/@angular/common/src/forms/directives/form_interface.ts
+++ b/modules/@angular/common/src/forms/directives/form_interface.ts
@@ -5,7 +5,7 @@ import {NgControlGroup} from './ng_control_group';
 
 
 /**
- * An interface that {@link NgFormModel} and {@link NgForm} implement.
+ * An interface that {@link FormGroupDirective} and {@link NgForm} implement.
  *
  * Only used by the forms module.
  *
@@ -23,7 +23,7 @@ export interface Form {
   removeControl(dir: NgControl): void;
 
   /**
-   * Look up the {@link Control} associated with a particular {@link NgControl}.
+   * Look up the {@link FormControl} associated with a particular {@link NgControl}.
    */
   getControl(dir: NgControl): FormControl;
 
diff --git a/modules/@angular/common/src/forms/directives/ng_control_group.ts b/modules/@angular/common/src/forms/directives/ng_control_group.ts
index 9149f1b213..fc6fd81abe 100644
--- a/modules/@angular/common/src/forms/directives/ng_control_group.ts
+++ b/modules/@angular/common/src/forms/directives/ng_control_group.ts
@@ -17,9 +17,7 @@ export const controlGroupProvider: any =
 /**
  * Creates and binds a control group to a DOM element.
  *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
- *
- * ### Example ([live demo](http://plnkr.co/edit/7EJ11uGeaggViYM6T5nq?p=preview))
+ * This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}.
  *
  * ```typescript
  * @Component({
diff --git a/modules/@angular/common/src/forms/directives/ng_control_name.ts b/modules/@angular/common/src/forms/directives/ng_control_name.ts
index 9d7014f6df..257fc4580b 100644
--- a/modules/@angular/common/src/forms/directives/ng_control_name.ts
+++ b/modules/@angular/common/src/forms/directives/ng_control_name.ts
@@ -18,9 +18,9 @@ export const controlNameBinding: any =
     };
 
 /**
- * Creates and binds a control with a specified name to a DOM element.
+ * Creates and binds a form control with a specified name to a DOM element.
  *
- * This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
+ * This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}.
 
  * ### Example
  *
diff --git a/modules/@angular/common/src/forms/directives/ng_form.ts b/modules/@angular/common/src/forms/directives/ng_form.ts
index d488e45e6d..7fdfcea692 100644
--- a/modules/@angular/common/src/forms/directives/ng_form.ts
+++ b/modules/@angular/common/src/forms/directives/ng_form.ts
@@ -77,7 +77,7 @@ export const formDirectiveProvider: any =
  *  @experimental
  */
 @Directive({
-  selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',
+  selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
   providers: [formDirectiveProvider],
   host: {
     '(submit)': 'onSubmit()',
diff --git a/modules/@angular/common/src/forms/directives/form_control_directive.ts b/modules/@angular/common/src/forms/directives/reactive_directives/form_control_directive.ts
similarity index 88%
rename from modules/@angular/common/src/forms/directives/form_control_directive.ts
rename to modules/@angular/common/src/forms/directives/reactive_directives/form_control_directive.ts
index ee8ca6b634..0802c036dd 100644
--- a/modules/@angular/common/src/forms/directives/form_control_directive.ts
+++ b/modules/@angular/common/src/forms/directives/reactive_directives/form_control_directive.ts
@@ -1,14 +1,14 @@
 import {Directive, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
 
-import {EventEmitter, ObservableWrapper} from '../../facade/async';
-import {StringMapWrapper} from '../../facade/collection';
-import {FormControl} from '../model';
-import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
+import {EventEmitter, ObservableWrapper} from '../../../facade/async';
+import {StringMapWrapper} from '../../../facade/collection';
+import {FormControl} from '../../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
 
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
-import {NgControl} from './ng_control';
-import {composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from './shared';
-import {AsyncValidatorFn, ValidatorFn} from './validators';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor';
+import {NgControl} from '../ng_control';
+import {composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from '../shared';
+import {AsyncValidatorFn, ValidatorFn} from '../validators';
 
 export const formControlBinding: any =
     /*@ts2dart_const*/ /* @ts2dart_Provider */ {
diff --git a/modules/@angular/common/src/forms/directives/ng_form_model.ts b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
similarity index 78%
rename from modules/@angular/common/src/forms/directives/ng_form_model.ts
rename to modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
index 0f97dacd7f..199404495e 100644
--- a/modules/@angular/common/src/forms/directives/ng_form_model.ts
+++ b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
@@ -1,26 +1,26 @@
-import {Directive, Inject, OnChanges, Optional, Self, SimpleChanges, forwardRef} from '@angular/core';
+import {Directive, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
 
-import {EventEmitter, ObservableWrapper} from '../../facade/async';
-import {ListWrapper, StringMapWrapper} from '../../facade/collection';
-import {BaseException} from '../../facade/exceptions';
-import {isBlank} from '../../facade/lang';
-import {FormControl, FormGroup} from '../model';
-import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../validators';
+import {EventEmitter, ObservableWrapper} from '../../../facade/async';
+import {ListWrapper, StringMapWrapper} from '../../../facade/collection';
+import {BaseException} from '../../../facade/exceptions';
+import {isBlank} from '../../../facade/lang';
+import {FormControl, FormGroup} from '../../model';
+import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
 
-import {ControlContainer} from './control_container';
-import {Form} from './form_interface';
-import {NgControl} from './ng_control';
-import {NgControlGroup} from './ng_control_group';
-import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from './shared';
+import {ControlContainer} from '../control_container';
+import {Form} from '../form_interface';
+import {NgControl} from '../ng_control';
+import {NgControlGroup} from '../ng_control_group';
+import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from '../shared';
 
 export const formDirectiveProvider: any =
     /*@ts2dart_const*/ /* @ts2dart_Provider */ {
       provide: ControlContainer,
-      useExisting: forwardRef(() => NgFormModel)
+      useExisting: forwardRef(() => FormGroupDirective)
     };
 
 /**
- * Binds an existing control group to a DOM element.
+ * Binds an existing form group to a DOM element.
  *
  * ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
  *
@@ -32,8 +32,8 @@ export const formDirectiveProvider: any =
  *   selector: 'my-app',
  *   template: `
  *     <div>
- *       <h2>NgFormModel Example</h2>
- *       <form [ngFormModel]="loginForm">
+ *       <h2>Binding an existing form group</h2>
+ *       <form [formGroup]="loginForm">
  *         <p>Login: <input type="text" ngControl="login"></p>
  *         <p>Password: <input type="password" ngControl="password"></p>
  *       </form>
@@ -66,7 +66,7 @@ export const formDirectiveProvider: any =
  *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
- *        <form [ngFormModel]='loginForm'>
+ *        <form [formGroup]='loginForm'>
  *          Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
  *          Password <input type='password' ngControl='password'
  *                          [(ngModel)]='credentials.password'>
@@ -94,20 +94,18 @@ export const formDirectiveProvider: any =
  *  @experimental
  */
 @Directive({
-  selector: '[ngFormModel]',
+  selector: '[formGroup]',
   providers: [formDirectiveProvider],
-  inputs: ['form: ngFormModel'],
   host: {'(submit)': 'onSubmit()'},
-  outputs: ['ngSubmit'],
   exportAs: 'ngForm'
 })
-export class NgFormModel extends ControlContainer implements Form,
+export class FormGroupDirective extends ControlContainer implements Form,
     OnChanges {
   private _submitted: boolean = false;
-
-  form: FormGroup = null;
   directives: NgControl[] = [];
-  ngSubmit = new EventEmitter();
+
+  @Input('formGroup') form: FormGroup = null;
+  @Output() ngSubmit = new EventEmitter();
 
   constructor(
       @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[],
@@ -181,8 +179,9 @@ export class NgFormModel extends ControlContainer implements Form,
 
   private _checkFormPresent() {
     if (isBlank(this.form)) {
-      throw new BaseException(
-          `ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm">`);
+      throw new BaseException(`formGroup expects a FormGroup instance. Please pass one in.
+           Example: <form [formGroup]="myFormGroup">
+      `);
     }
   }
 }
diff --git a/modules/@angular/common/src/forms/form_builder.ts b/modules/@angular/common/src/forms/form_builder.ts
index ed630fec6c..cde729d10d 100644
--- a/modules/@angular/common/src/forms/form_builder.ts
+++ b/modules/@angular/common/src/forms/form_builder.ts
@@ -11,14 +11,12 @@ import * as modelModule from './model';
 /**
  * Creates a form object from a user-specified configuration.
  *
- * ### Example ([live demo](http://plnkr.co/edit/ENgZo8EuIECZNensZCVr?p=preview))
- *
  * ```typescript
  * @Component({
  *   selector: 'my-app',
  *   viewProviders: [FORM_BINDINGS]
  *   template: `
- *     <form [ngFormModel]="loginForm">
+ *     <form [formGroup]="loginForm">
  *       <p>Login <input ngControl="login"></p>
  *       <div ngControlGroup="passwordRetry">
  *         <p>Password <input type="password" ngControl="password"></p>
diff --git a/modules/@angular/common/src/forms/model.ts b/modules/@angular/common/src/forms/model.ts
index 4eeff0a050..6a93010409 100644
--- a/modules/@angular/common/src/forms/model.ts
+++ b/modules/@angular/common/src/forms/model.ts
@@ -264,8 +264,8 @@ export abstract class AbstractControl {
  * ## Usage
  *
  * By default, a `FormControl` is created for every `<input>` or other form component.
- * With {@link FormControlDirective} or {@link NgFormModel} an existing {@link FormControl} can be
- * bound to a DOM element instead. This `FormControl` can be configured with a custom
+ * With {@link FormControlDirective} or {@link FormGroupDirective} an existing {@link FormControl}
+ * can be bound to a DOM element instead. This `FormControl` can be configured with a custom
  * validation function.
  *
  * @experimental
diff --git a/modules/@angular/common/test/forms/directives_spec.ts b/modules/@angular/common/test/forms/directives_spec.ts
index 6388fa1b5c..74af843fa2 100644
--- a/modules/@angular/common/test/forms/directives_spec.ts
+++ b/modules/@angular/common/test/forms/directives_spec.ts
@@ -4,7 +4,7 @@ import {fakeAsync, flushMicrotasks, Log, tick,} from '@angular/core/testing';
 
 import {SpyNgControl, SpyValueAccessor} from '../spies';
 
-import {FormGroup, FormControl, NgControlName, NgControlGroup, NgFormModel, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
+import {FormGroup, FormControl, NgControlName, NgControlGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
 
 
 import {selectValueAccessor, composeValidators} from '@angular/common/src/forms/directives/shared';
@@ -105,13 +105,13 @@ export function main() {
       });
     });
 
-    describe('NgFormModel', () => {
+    describe('formGroup', () => {
       var form: any /** TODO #9100 */;
       var formModel: FormGroup;
       var loginControlDir: any /** TODO #9100 */;
 
       beforeEach(() => {
-        form = new NgFormModel([], []);
+        form = new FormGroupDirective([], []);
         formModel = new FormGroup({
           'login': new FormControl(),
           'passwords': new FormGroup(
@@ -242,7 +242,7 @@ export function main() {
 
         it('should set up a sync validator', () => {
           var formValidator = (c: any /** TODO #9100 */) => ({'custom': true});
-          var f = new NgFormModel([formValidator], []);
+          var f = new FormGroupDirective([formValidator], []);
           f.form = formModel;
           f.ngOnChanges({'form': new SimpleChange(null, null)});
 
@@ -250,7 +250,7 @@ export function main() {
         });
 
         it('should set up an async validator', fakeAsync(() => {
-             var f = new NgFormModel([], [asyncValidator('expected')]);
+             var f = new FormGroupDirective([], [asyncValidator('expected')]);
              f.form = formModel;
              f.ngOnChanges({'form': new SimpleChange(null, null)});
 
@@ -345,7 +345,7 @@ export function main() {
       beforeEach(() => {
         formModel = new FormGroup({'login': new FormControl(null)});
 
-        var parent = new NgFormModel([], []);
+        var parent = new FormGroupDirective([], []);
         parent.form = new FormGroup({'group': formModel});
         controlGroupDir = new NgControlGroup(parent, [], []);
         controlGroupDir.name = 'group';
@@ -447,7 +447,7 @@ export function main() {
       beforeEach(() => {
         formModel = new FormControl('name');
 
-        var parent = new NgFormModel([], []);
+        var parent = new FormGroupDirective([], []);
         parent.form = new FormGroup({'name': formModel});
         controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]);
         controlNameDir.name = 'name';
diff --git a/modules/@angular/common/test/forms/integration_spec.ts b/modules/@angular/common/test/forms/integration_spec.ts
index 5f16a48d01..0a5738d5e1 100644
--- a/modules/@angular/common/test/forms/integration_spec.ts
+++ b/modules/@angular/common/test/forms/integration_spec.ts
@@ -1,5 +1,5 @@
 import {NgFor, NgIf} from '@angular/common';
-import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormControlDirective, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
+import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormControlDirective, FormGroup, FormGroupDirective, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
 import {TestComponentBuilder} from '@angular/compiler/testing';
 import {ComponentFixture} from '@angular/compiler/testing';
 import {Component, Directive, EventEmitter, Output} from '@angular/core';
@@ -22,7 +22,7 @@ export function main() {
        inject(
            [TestComponentBuilder, AsyncTestCompleter],
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
                </div>`;
 
@@ -37,17 +37,17 @@ export function main() {
              });
            }));
 
-    it('should throw if a form isn\'t passed into ngFormModel',
+    it('should throw if a form isn\'t passed into formGroup',
        inject(
            [TestComponentBuilder, AsyncTestCompleter],
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
                </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
                expect(() => fixture.detectChanges())
-                   .toThrowError(new RegExp(`ngFormModel expects a form. Please pass one in.`));
+                   .toThrowError(new RegExp(`formGroup expects a FormGroup instance`));
                async.done();
              });
            }));
@@ -58,7 +58,7 @@ export function main() {
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
              var form = new FormGroup({'login': new FormControl('oldValue')});
 
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
               </div>`;
 
@@ -81,7 +81,7 @@ export function main() {
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
              var form = new FormGroup({'login': new FormControl('oldValue')});
 
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
               </div>`;
 
@@ -102,8 +102,8 @@ export function main() {
 
     it('should emit ngSubmit event on submit',
        fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-         var t = `<div>
-                      <form [ngFormModel]="form" (ngSubmit)="name='updated'"></form>
+         const t = `<div>
+                      <form [formGroup]="form" (ngSubmit)="name='updated'"></form>
                       <span>{{name}}</span>
                     </div>`;
 
@@ -124,7 +124,7 @@ export function main() {
 
     it('should mark NgForm as submitted on submit event',
        inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                var t = `<div>
+                const t = `<div>
                       <form #f="ngForm" (ngSubmit)="data=f.submitted"></form>
                       <span>{{data}}</span>
                     </div>`;
@@ -147,10 +147,10 @@ export function main() {
                 expect(fixture.debugElement.componentInstance.data).toEqual(true);
               })));
 
-    it('should mark NgFormModel as submitted on submit event',
+    it('should mark formGroup as submitted on submit event',
        inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
-                var t = `<div>
-                      <form #f="ngForm" [ngFormModel]="form" (ngSubmit)="data=f.submitted"></form>
+                const t = `<div>
+                      <form #f="ngForm" [formGroup]="form" (ngSubmit)="data=f.submitted"></form>
                       <span>{{data}}</span>
                     </div>`;
 
@@ -200,7 +200,7 @@ export function main() {
        inject(
            [TestComponentBuilder, AsyncTestCompleter],
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
                </div>`;
 
@@ -226,7 +226,7 @@ export function main() {
              var login = new FormControl('oldValue');
              var form = new FormGroup({'login': login});
 
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
                </div>`;
 
@@ -251,7 +251,7 @@ export function main() {
              var login = new FormControl('oldValue');
              var form = new FormGroup({'login': login});
 
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                 <input type="text" ngControl="login">
                </div>`;
 
@@ -275,7 +275,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="text" ngControl="text">
                 </div>`;
 
@@ -299,7 +299,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input ngControl="text">
                 </div>`;
 
@@ -322,7 +322,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <textarea ngControl="text"></textarea>
                 </div>`;
 
@@ -346,7 +346,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="checkbox" ngControl="checkbox">
                 </div>`;
 
@@ -372,7 +372,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="number" ngControl="num">
                 </div>`;
 
@@ -396,7 +396,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="number" ngControl="num" required>
                 </div>`;
 
@@ -427,7 +427,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                var form = new FormGroup({'num': new FormControl(10)});
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="number" ngControl="num" [(ngModel)]="data">
                 </div>`;
 
@@ -447,7 +447,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<form [ngFormModel]="form">
+               const t = `<form [formGroup]="form">
                   <input type="radio" ngControl="foodChicken" name="food">
                   <input type="radio" ngControl="foodFish" name="food">
                 </form>`;
@@ -477,7 +477,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<select>
+                 const t = `<select>
                       <option value="SF"></option>
                       <option value="NYC"></option>
                     </select>`;
@@ -498,7 +498,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<select>
+                 const t = `<select>
                       <option *ngFor="let city of list" [value]="city['id']">
                         {{ city['name'] }}
                       </option>
@@ -523,7 +523,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div [ngFormModel]="form">
+                 const t = `<div [formGroup]="form">
                     <select ngControl="city">
                       <option value="SF"></option>
                       <option value="NYC"></option>
@@ -555,7 +555,7 @@ export function main() {
 
         it('with a dynamic list of options',
            fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-             var t = `<div [ngFormModel]="form">
+             const t = `<div [formGroup]="form">
                       <select ngControl="city">
                         <option *ngFor="let c of data" [value]="c"></option>
                       </select>
@@ -582,7 +582,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
                       </select>
@@ -615,7 +615,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
                       </select>
@@ -644,7 +644,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
                       </select>
@@ -676,7 +676,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
                       </select>
@@ -703,7 +703,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list; trackBy:customTrackBy" [ngValue]="c">{{c}}</option>
                       </select>
@@ -734,7 +734,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
                       </select>
@@ -764,7 +764,7 @@ export function main() {
            inject(
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                 var t = `<div>
+                 const t = `<div>
                       <select [(ngModel)]="selectedCity">
                         <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
                       </select>
@@ -794,7 +794,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="text" ngControl="name" wrapped-value>
                 </div>`;
 
@@ -813,32 +813,31 @@ export function main() {
                });
              }));
 
-      // TODO(kara): Revisit when re-writing to ngModelOptions
-      xit('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
-          inject(
-              [TestComponentBuilder, AsyncTestCompleter],
-              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-                var t = `<div [ngFormModel]="form">
+      it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
+         inject(
+             [TestComponentBuilder, AsyncTestCompleter],
+             (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+               const t = `<div [formGroup]="form">
                   <my-input ngControl="name"></my-input>
                 </div>`;
 
-                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
-                  fixture.debugElement.componentInstance.form =
-                      new FormGroup({'name': new FormControl('aa')});
-                  fixture.detectChanges();
-                  var input = fixture.debugElement.query(By.css('my-input'));
-                  expect(input.componentInstance.value).toEqual('!aa!');
+               tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
+                 fixture.debugElement.componentInstance.form =
+                     new FormGroup({'name': new FormControl('aa')});
+                 fixture.detectChanges();
+                 var input = fixture.debugElement.query(By.css('my-input'));
+                 expect(input.componentInstance.value).toEqual('!aa!');
 
-                  input.componentInstance.value = '!bb!';
-                  ObservableWrapper.subscribe(input.componentInstance.onInput, (value) => {
-                    expect(fixture.debugElement.componentInstance.form.value).toEqual({
-                      'name': 'bb'
-                    });
-                    async.done();
-                  });
-                  input.componentInstance.dispatchChangeEvent();
-                });
-              }));
+                 input.componentInstance.value = '!bb!';
+                 ObservableWrapper.subscribe(input.componentInstance.onInput, (value) => {
+                   expect(fixture.debugElement.componentInstance.form.value).toEqual({
+                     'name': 'bb'
+                   });
+                   async.done();
+                 });
+                 input.componentInstance.dispatchChangeEvent();
+               });
+             }));
 
     });
 
@@ -853,7 +852,7 @@ export function main() {
                  'max': new FormControl('')
                });
 
-               var t = `<div [ngFormModel]="form" login-is-empty-validator>
+               const t = `<div [formGroup]="form" login-is-empty-validator>
                     <input type="text" ngControl="login" required>
                     <input type="text" ngControl="min" minlength="3">
                     <input type="text" ngControl="max" maxlength="3">
@@ -897,7 +896,7 @@ export function main() {
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            var form = new FormGroup({'login': new FormControl('')});
 
-           var t = `<div [ngFormModel]="form">
+           const t = `<div [formGroup]="form">
                     <input type="text" ngControl="login" uniq-login-validator="expected">
                  </div>`;
 
@@ -928,7 +927,7 @@ export function main() {
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                var form = new FormGroup({'login': new FormControl('aa', Validators.required)});
 
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <input type="text" ngControl="login">
                  </div>`;
 
@@ -953,7 +952,7 @@ export function main() {
                new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
            var form = new FormGroup({'login': control});
 
-           var t = `<div [ngFormModel]="form">
+           const t = `<div [formGroup]="form">
                   <input type="text" ngControl="login">
                  </div>`;
 
@@ -991,7 +990,7 @@ export function main() {
                var form =
                    new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
 
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                   <div ngControlGroup="nested">
                     <input type="text" ngControl="login">
                   </div>
@@ -1014,7 +1013,7 @@ export function main() {
                var form =
                    new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
 
-               var t = `<div [ngFormModel]="form">
+               const t = `<div [formGroup]="form">
                     <div ngControlGroup="nested">
                       <input type="text" ngControl="login">
                     </div>
@@ -1038,8 +1037,8 @@ export function main() {
        fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
          var form = new FormGroup({'name': new FormControl('')});
 
-         var t =
-             `<div [ngFormModel]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
+         const t =
+             `<div [formGroup]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
 
          let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
          tick();
@@ -1083,7 +1082,7 @@ export function main() {
     describe('template-driven forms', () => {
       it('should add new controls and control groups',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<form>
+           const t = `<form>
                      <div ngControlGroup="user">
                       <input type="text" ngControl="login">
                      </div>
@@ -1105,7 +1104,7 @@ export function main() {
 
       it('should emit ngSubmit event on submit',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<div><form (ngSubmit)="name='updated'"></form></div>`;
+           const t = `<div><form (ngSubmit)="name='updated'"></form></div>`;
 
            let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
            tick();
@@ -1122,7 +1121,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<form ngNoForm>
+               const t = `<form ngNoForm>
                </form>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -1136,7 +1135,7 @@ export function main() {
 
       it('should remove controls',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<form>
+           const t = `<form>
                     <div *ngIf="name == 'show'">
                       <input type="text" ngControl="login">
                     </div>
@@ -1161,7 +1160,7 @@ export function main() {
 
       it('should remove control groups',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<form>
+           const t = `<form>
                      <div *ngIf="name=='show'" ngControlGroup="user">
                       <input type="text" ngControl="login">
                      </div>
@@ -1186,7 +1185,7 @@ export function main() {
 
       it('should support ngModel for complex forms',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<form>
+           const t = `<form>
                       <input type="text" ngControl="name" [(ngModel)]="name">
                </form>`;
 
@@ -1209,7 +1208,7 @@ export function main() {
 
       it('should support ngModel for single fields',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<div><input type="text" [(ngModel)]="name"></div>`;
+           const t = `<div><input type="text" [(ngModel)]="name"></div>`;
 
            let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
            tick();
@@ -1374,7 +1373,7 @@ export function main() {
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                var form = new FormGroup({'name': new FormControl('', Validators.required)});
 
-               var t = `<form [ngFormModel]="form"><input type="text" ngControl="name"></form>`;
+               const t = `<form [formGroup]="form"><input type="text" ngControl="name"></form>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
                  fixture.debugElement.componentInstance.form = form;
@@ -1405,7 +1404,7 @@ export function main() {
          inject(
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
-               var t = `<div><input [(ngModel)]="name" required></div>`;
+               const t = `<div><input [(ngModel)]="name" required></div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
                  fixture.debugElement.componentInstance.name = '';
@@ -1458,7 +1457,7 @@ export function main() {
 
       it('should update the view when the model is set back to what used to be in the view',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           var t = `<input type="text" [(ngModel)]="name">`;
+           const t = `<input type="text" [(ngModel)]="name">`;
            let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
            tick();
            fixture.debugElement.componentInstance.name = '';
@@ -1491,7 +1490,7 @@ export function main() {
            // {{x.valid}} used to crash because valid() tried to read a property
            // from form.control before it was set. This test verifies this bug is
            // fixed.
-           var t = `<form><div ngControlGroup="x" #x="ngForm">
+           const t = `<form><div ngControlGroup="x" #x="ngForm">
                   <input type="text" ngControl="test"></div>{{x.valid}}</form>`;
            let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
            tick();
@@ -1523,7 +1522,7 @@ class WrappedValue implements ControlValueAccessor {
 
 @Component({selector: 'my-input', template: ''})
 class MyInput implements ControlValueAccessor {
-  @Output('input') onInput: EventEmitter<any> = new EventEmitter();
+  @Output('input') onInput = new EventEmitter();
   value: string;
 
   constructor(cd: NgControl) { cd.valueAccessor = this; }
@@ -1584,7 +1583,7 @@ class UniqLoginValidator implements Validator {
   template: '',
   directives: [
     FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
-    FormControlDirective
+    FormControlDirective, FormGroupDirective
   ],
   providers: [FORM_PROVIDERS]
 })