diff --git a/modules/@angular/common/src/forms.ts b/modules/@angular/common/src/forms.ts
index 7acbbe1e5a..3e30cd0bd2 100644
--- a/modules/@angular/common/src/forms.ts
+++ b/modules/@angular/common/src/forms.ts
@@ -22,10 +22,10 @@ export {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_ac
 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 {FormControlName} from './forms/directives/form_control_name';
 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 {NgModel} from './forms/directives/ng_model';
diff --git a/modules/@angular/common/src/forms/directives.ts b/modules/@angular/common/src/forms/directives.ts
index 0cc0993951..3817784581 100644
--- a/modules/@angular/common/src/forms/directives.ts
+++ b/modules/@angular/common/src/forms/directives.ts
@@ -2,8 +2,8 @@ import {Type} from '@angular/core';
 
 import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
 import {DefaultValueAccessor} from './directives/default_value_accessor';
+import {FormControlName} from './directives/form_control_name';
 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 {NgModel} from './directives/ng_model';
@@ -18,9 +18,9 @@ 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 {FormControlName} from './directives/form_control_name';
 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 {NgModel} from './directives/ng_model';
@@ -52,7 +52,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
  * @experimental
  */
 export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
-  NgControlName, NgControlGroup,
+  NgControlGroup,
 
   NgModel, NgForm,
 
@@ -64,4 +64,4 @@ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
 ];
 
 export const REACTIVE_FORM_DIRECTIVES: Type[] =
-    /*@ts2dart_const*/[FormControlDirective, FormGroupDirective];
\ No newline at end of file
+    /*@ts2dart_const*/[FormControlDirective, FormGroupDirective, FormControlName];
\ No newline at end of file
diff --git a/modules/@angular/common/src/forms/directives/checkbox_value_accessor.ts b/modules/@angular/common/src/forms/directives/checkbox_value_accessor.ts
index 25120cfd65..6552b3ad3c 100644
--- a/modules/@angular/common/src/forms/directives/checkbox_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/checkbox_value_accessor.ts
@@ -13,14 +13,14 @@ export const CHECKBOX_VALUE_ACCESSOR: any = /*@ts2dart_const*/ {
  *
  *  ### Example
  *  ```
- *  <input type="checkbox" ngControl="rememberLogin">
+ *  <input type="checkbox" name="rememberLogin" ngModel>
  *  ```
  *
  *  @experimental
  */
 @Directive({
   selector:
-      'input[type=checkbox][ngControl],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
+      'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
   host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
   providers: [CHECKBOX_VALUE_ACCESSOR]
 })
diff --git a/modules/@angular/common/src/forms/directives/default_value_accessor.ts b/modules/@angular/common/src/forms/directives/default_value_accessor.ts
index f29468417f..0bd476bcbd 100644
--- a/modules/@angular/common/src/forms/directives/default_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/default_value_accessor.ts
@@ -13,18 +13,18 @@ export const DEFAULT_VALUE_ACCESSOR: any = /*@ts2dart_const*/
 
 /**
  * The default accessor for writing a value and listening to changes that is used by the
- * {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
  *
  *  ### Example
  *  ```
- *  <input type="text" ngControl="searchQuery">
+ *  <input type="text" name="searchQuery" ngModel>
  *  ```
  *
  *  @experimental
  */
 @Directive({
   selector:
-      'input:not([type=checkbox])[ngControl],textarea[ngControl],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
+      'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
   // TODO: vsavkin replace the above selector with the one below it once
   // https://github.com/angular/angular/issues/3011 is implemented
   // selector: '[ngControl],[ngModel],[ngFormControl]',
diff --git a/modules/@angular/common/src/forms/directives/ng_control_name.ts b/modules/@angular/common/src/forms/directives/form_control_name.ts
similarity index 67%
rename from modules/@angular/common/src/forms/directives/ng_control_name.ts
rename to modules/@angular/common/src/forms/directives/form_control_name.ts
index 257fc4580b..d84e85b086 100644
--- a/modules/@angular/common/src/forms/directives/ng_control_name.ts
+++ b/modules/@angular/common/src/forms/directives/form_control_name.ts
@@ -1,4 +1,4 @@
-import {Directive, Host, Inject, OnChanges, OnDestroy, Optional, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
+import {Directive, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
 
 import {EventEmitter, ObservableWrapper} from '../../facade/async';
 import {FormControl} from '../model';
@@ -14,7 +14,7 @@ import {AsyncValidatorFn, ValidatorFn} from './validators';
 export const controlNameBinding: any =
     /*@ts2dart_const*/ /* @ts2dart_Provider */ {
       provide: NgControl,
-      useExisting: forwardRef(() => NgControlName)
+      useExisting: forwardRef(() => FormControlName)
     };
 
 /**
@@ -31,39 +31,50 @@ export const controlNameBinding: any =
  *  ```
  * @Component({
  *      selector: "login-comp",
- *      directives: [FORM_DIRECTIVES],
+ *      directives: [REACTIVE_FORM_DIRECTIVES],
  *      template: `
- *        <form #f="ngForm" (submit)='onLogIn(f.value)'>
- *          Login <input type='text' ngControl='login' #l="ngForm">
- *          <div *ngIf="!l.valid">Login is invalid</div>
- *
- *          Password <input type='password' ngControl='password'>
- *          <button type='submit'>Log in!</button>
+ *        <form [formGroup]="myForm" (submit)="onLogIn()">
+ *          Login <input type="text" formControlName="login">
+ *          <div *ngIf="!loginCtrl.valid">Login is invalid</div>
+ *          Password <input type="password" formControlName="password">
+ *          <button type="submit">Log in!</button>
  *        </form>
  *      `})
  * class LoginComp {
- *  onLogIn(value): void {
+ *  loginCtrl = new Control();
+ *  passwordCtrl = new Control();
+ *  myForm = new FormGroup({
+ *     login: loginCtrl,
+ *     password: passwordCtrl
+ *  });
+ *  onLogIn(): void {
  *    // value === {login: 'some login', password: 'some password'}
  *  }
  * }
  *  ```
  *
- * We can also use ngModel to bind a domain model to the form.
+ * TODO(kara): Remove ngModel example with reactive paradigm
+ * We can also use ngModel to bind a domain model to the form, if you don't want to provide
+ * individual init values to each control.
  *
  *  ```
  * @Component({
  *      selector: "login-comp",
- *      directives: [FORM_DIRECTIVES],
+ *      directives: [REACTIVE_FORM_DIRECTIVES],
  *      template: `
- *        <form (submit)='onLogIn()'>
- *          Login <input type='text' ngControl='login' [(ngModel)]="credentials.login">
- *          Password <input type='password' ngControl='password'
+ *        <form [formGroup]="myForm" (submit)='onLogIn()'>
+ *          Login <input type='text' formControlName='login' [(ngModel)]="credentials.login">
+ *          Password <input type='password' formControlName='password'
  *                          [(ngModel)]="credentials.password">
  *          <button type='submit'>Log in!</button>
  *        </form>
  *      `})
  * class LoginComp {
  *  credentials: {login:string, password:string};
+ *  myForm = new FormGroup({
+ *    login: new Control(this.credentials.login),
+ *    password: new Control(this.credentials.password)
+ *  });
  *
  *  onLogIn(): void {
  *    // this.credentials.login === "some login"
@@ -74,21 +85,18 @@ export const controlNameBinding: any =
  *
  *  @experimental
  */
-@Directive({
-  selector: '[ngControl]',
-  providers: [controlNameBinding],
-  inputs: ['name: ngControl', 'model: ngModel'],
-  outputs: ['update: ngModelChange'],
-  exportAs: 'ngForm'
-})
-export class NgControlName extends NgControl implements OnChanges,
-    OnDestroy {
+@Directive({selector: '[formControlName]', providers: [controlNameBinding]})
+export class FormControlName extends NgControl implements OnChanges, OnDestroy {
   /** @internal */
-  update = new EventEmitter();
-  model: any;
   viewModel: any;
   private _added = false;
 
+  @Input('formControlName') name: string;
+
+  // TODO(kara):  Replace ngModel with reactive API
+  @Input('ngModel') model: any;
+  @Output('ngModelChange') update = new EventEmitter();
+
   constructor(@Host() @SkipSelf() private _parent: ControlContainer,
               @Optional() @Self() @Inject(NG_VALIDATORS) private _validators:
                   /* Array<Validator|Function> */ any[],
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 fc6fd81abe..d5e7cb06e1 100644
--- a/modules/@angular/common/src/forms/directives/ng_control_group.ts
+++ b/modules/@angular/common/src/forms/directives/ng_control_group.ts
@@ -28,15 +28,15 @@ export const controlGroupProvider: any =
  *       <form #f="ngForm">
  *         <div ngControlGroup="name" #cgName="ngForm">
  *           <h3>Enter your name:</h3>
- *           <p>First: <input ngControl="first" required></p>
- *           <p>Middle: <input ngControl="middle"></p>
- *           <p>Last: <input ngControl="last" required></p>
+ *           <p>First: <input name="first" ngModel required></p>
+ *           <p>Middle: <input name="middle" ngModel></p>
+ *           <p>Last: <input name="last" ngModel required></p>
  *         </div>
  *         <h3>Name value:</h3>
  *         <pre>{{valueOf(cgName)}}</pre>
  *         <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p>
  *         <h3>What's your favorite food?</h3>
- *         <p><input ngControl="food"></p>
+ *         <p><input name="food" ngModel></p>
  *         <h3>Form value</h3>
  *         <pre>{{valueOf(f)}}</pre>
  *       </form>
diff --git a/modules/@angular/common/src/forms/directives/ng_control_status.ts b/modules/@angular/common/src/forms/directives/ng_control_status.ts
index 01f750efb9..38627e246c 100644
--- a/modules/@angular/common/src/forms/directives/ng_control_status.ts
+++ b/modules/@angular/common/src/forms/directives/ng_control_status.ts
@@ -12,7 +12,7 @@ import {NgControl} from './ng_control';
  * @experimental
  */
 @Directive({
-  selector: '[ngControl],[ngModel],[formControl]',
+  selector: '[formControlName],[ngModel],[formControl]',
   host: {
     '[class.ng-untouched]': 'ngClassUntouched',
     '[class.ng-touched]': 'ngClassTouched',
diff --git a/modules/@angular/common/src/forms/directives/ng_form.ts b/modules/@angular/common/src/forms/directives/ng_form.ts
index 7fdfcea692..ad2a7cc65a 100644
--- a/modules/@angular/common/src/forms/directives/ng_form.ts
+++ b/modules/@angular/common/src/forms/directives/ng_form.ts
@@ -35,8 +35,6 @@ export const formDirectiveProvider: any =
  *
  * The `ngSubmit` event signals when the user triggers a form submission.
  *
- * ### Example ([live demo](http://plnkr.co/edit/ltdgYj4P0iY64AR71EpL?p=preview))
- *
  *  ```typescript
  * @Component({
  *   selector: 'my-app',
@@ -47,13 +45,13 @@ export const formDirectiveProvider: any =
  *       <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  *         <h3>Control group: credentials</h3>
  *         <div ngControlGroup="credentials">
- *           <p>Login: <input type="text" ngControl="login"></p>
- *           <p>Password: <input type="password" ngControl="password"></p>
+ *           <p>Login: <input type="text" name="login" ngModel></p>
+ *           <p>Password: <input type="password" name="password" ngModel></p>
  *         </div>
  *         <h3>Control group: person</h3>
  *         <div ngControlGroup="person">
- *           <p>First name: <input type="text" ngControl="firstName"></p>
- *           <p>Last name: <input type="text" ngControl="lastName"></p>
+ *           <p>First name: <input type="text" name="firstName" ngModel></p>
+ *           <p>Last name: <input type="text" name="lastName" ngModel></p>
  *         </div>
  *         <button type="submit">Submit Form</button>
  *       <p>Form data submitted:</p>
@@ -61,7 +59,7 @@ export const formDirectiveProvider: any =
  *       <pre>{{data}}</pre>
  *     </div>
  * `,
- *   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
+ *   directives: []
  * })
  * export class App {
  *   constructor() {}
diff --git a/modules/@angular/common/src/forms/directives/ng_model.ts b/modules/@angular/common/src/forms/directives/ng_model.ts
index bf87440681..c95cd68f86 100644
--- a/modules/@angular/common/src/forms/directives/ng_model.ts
+++ b/modules/@angular/common/src/forms/directives/ng_model.ts
@@ -41,7 +41,7 @@ export const formControlBinding: any =
  *  @experimental
  */
 @Directive({
-  selector: '[ngModel]:not([ngControl]):not([formControl])',
+  selector: '[ngModel]:not([formControlName]):not([formControl])',
   providers: [formControlBinding],
   exportAs: 'ngForm'
 })
diff --git a/modules/@angular/common/src/forms/directives/number_value_accessor.ts b/modules/@angular/common/src/forms/directives/number_value_accessor.ts
index ddc0d9d74a..58b37d9161 100644
--- a/modules/@angular/common/src/forms/directives/number_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/number_value_accessor.ts
@@ -12,7 +12,7 @@ export const NUMBER_VALUE_ACCESSOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider
 
 /**
  * The accessor for writing a number value and listening to changes that is used by the
- * {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
  *
  *  ### Example
  *  ```
@@ -21,7 +21,7 @@ export const NUMBER_VALUE_ACCESSOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider
  */
 @Directive({
   selector:
-      'input[type=number][ngControl],input[type=number][formControl],input[type=number][ngModel]',
+      'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
   host: {
     '(change)': 'onChange($event.target.value)',
     '(input)': 'onChange($event.target.value)',
diff --git a/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts b/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts
index 8dd117640f..eb822c6b86 100644
--- a/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/radio_control_value_accessor.ts
@@ -60,7 +60,7 @@ export class RadioButtonState {
 
 /**
  * The accessor for writing a radio control value and listening to changes that is used by the
- * {@link NgModel}, {@link FormControlDirective}, and {@link NgControlName} directives.
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
  *
  *  ### Example
  *  ```
@@ -78,7 +78,7 @@ export class RadioButtonState {
  */
 @Directive({
   selector:
-      'input[type=radio][ngControl],input[type=radio][formControl],input[type=radio][ngModel]',
+      'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
   host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
   providers: [RADIO_VALUE_ACCESSOR]
 })
diff --git a/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
index 199404495e..f01548bc19 100644
--- a/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
+++ b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
@@ -34,14 +34,14 @@ export const formDirectiveProvider: any =
  *     <div>
  *       <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>
+ *         <p>Login: <input type="text" formControlName="login"></p>
+ *         <p>Password: <input type="password" formControlName="password"></p>
  *       </form>
  *       <p>Value:</p>
  *       <pre>{{value}}</pre>
  *     </div>
  *   `,
- *   directives: [FORM_DIRECTIVES]
+ *   directives: [REACTIVE_FORM_DIRECTIVES]
  * })
  * export class App {
  *   loginForm: FormGroup;
@@ -64,11 +64,11 @@ export const formDirectiveProvider: any =
  *  ```typescript
  * @Component({
  *      selector: "login-comp",
- *      directives: [FORM_DIRECTIVES],
+ *      directives: [REACTIVE_FORM_DIRECTIVES],
  *      template: `
  *        <form [formGroup]='loginForm'>
- *          Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
- *          Password <input type='password' ngControl='password'
+ *          Login <input type='text' formControlName='login' [(ngModel)]='credentials.login'>
+ *          Password <input type='password' formControlName='password'
  *                          [(ngModel)]='credentials.password'>
  *          <button (click)="onLogin()">Login</button>
  *        </form>`
diff --git a/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts b/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
index cc6c7b8332..0ff036f5c9 100644
--- a/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
@@ -33,7 +33,7 @@ function _extractId(valueString: string): string {
  */
 @Directive({
   selector:
-      'select:not([multiple])[ngControl],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
+      'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
   host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'},
   providers: [SELECT_VALUE_ACCESSOR]
 })
@@ -87,7 +87,7 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
  * ### Example
  *
  * ```
- * <select ngControl="city">
+ * <select name="city" ngModel>
  *   <option *ngFor="let c of cities" [value]="c"></option>
  * </select>
  * ```
diff --git a/modules/@angular/common/src/forms/directives/select_multiple_control_value_accessor.ts b/modules/@angular/common/src/forms/directives/select_multiple_control_value_accessor.ts
index 860627697b..860f7e7e13 100644
--- a/modules/@angular/common/src/forms/directives/select_multiple_control_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/select_multiple_control_value_accessor.ts
@@ -38,7 +38,8 @@ abstract class HTMLCollection {
  * The accessor for writing a value and listening to changes on a select element.
  */
 @Directive({
-  selector: 'select[multiple][ngControl],select[multiple][formControl],select[multiple][ngModel]',
+  selector:
+      'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
   host: {'(input)': 'onChange($event.target)', '(blur)': 'onTouched()'},
   providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
 })
@@ -118,7 +119,7 @@ export class SelectMultipleControlValueAccessor implements ControlValueAccessor
  * ### Example
  *
  * ```
- * <select multiple ngControl="city">
+ * <select multiple name="city" ngModel>
  *   <option *ngFor="let c of cities" [value]="c"></option>
  * </select>
  * ```
diff --git a/modules/@angular/common/src/forms/directives/validators.ts b/modules/@angular/common/src/forms/directives/validators.ts
index 13fa74964b..fff44651bf 100644
--- a/modules/@angular/common/src/forms/directives/validators.ts
+++ b/modules/@angular/common/src/forms/directives/validators.ts
@@ -40,13 +40,13 @@ export const REQUIRED_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*/
  * ### Example
  *
  * ```
- * <input ngControl="fullName" required>
+ * <input name="fullName" ngModel required>
  * ```
  *
  * @experimental
  */
 @Directive({
-  selector: '[required][ngControl],[required][formControl],[required][ngModel]',
+  selector: '[required][formControlName],[required][formControl],[required][ngModel]',
   providers: [REQUIRED_VALIDATOR]
 })
 export class RequiredValidator {
@@ -71,13 +71,13 @@ export const MIN_LENGTH_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*
 };
 
 /**
- * A directive which installs the {@link MinLengthValidator} for any `ngControl`,
+ * A directive which installs the {@link MinLengthValidator} for any `formControlName`,
  * `formControl`, or control with `ngModel` that also has a `minlength` attribute.
  *
  * @experimental
  */
 @Directive({
-  selector: '[minlength][ngControl],[minlength][formControl],[minlength][ngModel]',
+  selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
   providers: [MIN_LENGTH_VALIDATOR]
 })
 export class MinLengthValidator implements Validator {
@@ -104,13 +104,14 @@ export const MAX_LENGTH_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*
 };
 
 /**
- * A directive which installs the {@link MaxLengthValidator} for any `ngControl, `formControl`,
+ * A directive which installs the {@link MaxLengthValidator} for any `formControlName,
+ * `formControl`,
  * or control with `ngModel` that also has a `maxlength` attribute.
  *
  * @experimental
  */
 @Directive({
-  selector: '[maxlength][ngControl],[maxlength][formControl],[maxlength][ngModel]',
+  selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
   providers: [MAX_LENGTH_VALIDATOR]
 })
 export class MaxLengthValidator implements Validator {
@@ -140,12 +141,12 @@ export const PATTERN_VALIDATOR: any = /*@ts2dart_const*/ /*@ts2dart_Provider*/ {
  * ### Example
  *
  * ```
- * <input [ngControl]="fullName" pattern="[a-zA-Z ]*">
+ * <input [name]="fullName" pattern="[a-zA-Z ]*" ngModel>
  * ```
  * @experimental
  */
 @Directive({
-  selector: '[pattern][ngControl],[pattern][formControl],[pattern][ngModel]',
+  selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
   providers: [PATTERN_VALIDATOR]
 })
 export class PatternValidator implements Validator {
diff --git a/modules/@angular/common/src/forms/form_builder.ts b/modules/@angular/common/src/forms/form_builder.ts
index cde729d10d..a4a8a0eb58 100644
--- a/modules/@angular/common/src/forms/form_builder.ts
+++ b/modules/@angular/common/src/forms/form_builder.ts
@@ -14,19 +14,18 @@ import * as modelModule from './model';
  * ```typescript
  * @Component({
  *   selector: 'my-app',
- *   viewProviders: [FORM_BINDINGS]
  *   template: `
  *     <form [formGroup]="loginForm">
- *       <p>Login <input ngControl="login"></p>
+ *       <p>Login <input formControlName="login"></p>
  *       <div ngControlGroup="passwordRetry">
- *         <p>Password <input type="password" ngControl="password"></p>
- *         <p>Confirm password <input type="password" ngControl="passwordConfirmation"></p>
+ *         <p>Password <input type="password" formControlName="password"></p>
+ *         <p>Confirm password <input type="password" formControlName="passwordConfirmation"></p>
  *       </div>
  *     </form>
  *     <h3>Form value:</h3>
  *     <pre>{{value}}</pre>
  *   `,
- *   directives: [FORM_DIRECTIVES]
+ *   directives: [REACTIVE_FORM_DIRECTIVES]
  * })
  * export class App {
  *   loginForm: FormGroup;
diff --git a/modules/@angular/common/test/forms/directives_spec.ts b/modules/@angular/common/test/forms/directives_spec.ts
index 2f448e1666..0e6ebc9c0c 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, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
+import {FormGroup, FormControl, FormControlName, 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';
@@ -119,7 +119,7 @@ export function main() {
         });
         form.form = formModel;
 
-        loginControlDir = new NgControlName(
+        loginControlDir = new FormControlName(
             form, [Validators.required], [asyncValidator('expected')], [defaultAccessor]);
         loginControlDir.name = 'login';
         loginControlDir.valueAccessor = new DummyControlValueAccessor();
@@ -138,7 +138,7 @@ export function main() {
 
       describe('addControl', () => {
         it('should throw when no control found', () => {
-          var dir = new NgControlName(form, null, null, [defaultAccessor]);
+          var dir = new FormControlName(form, null, null, [defaultAccessor]);
           dir.name = 'invalidName';
 
           expect(() => form.addControl(dir))
@@ -146,7 +146,7 @@ export function main() {
         });
 
         it('should throw when no value accessor', () => {
-          var dir = new NgControlName(form, null, null, null);
+          var dir = new FormControlName(form, null, null, null);
           dir.name = 'login';
 
           expect(() => form.addControl(dir))
@@ -274,7 +274,7 @@ export function main() {
         personControlGroupDir = new NgControlGroup(form, [], []);
         personControlGroupDir.name = 'person';
 
-        loginControlDir = new NgControlName(personControlGroupDir, null, null, [defaultAccessor]);
+        loginControlDir = new FormControlName(personControlGroupDir, null, null, [defaultAccessor]);
         loginControlDir.name = 'login';
         loginControlDir.valueAccessor = new DummyControlValueAccessor();
       });
@@ -440,7 +440,7 @@ export function main() {
          }));
     });
 
-    describe('NgControlName', () => {
+    describe('FormControlName', () => {
       var formModel: any /** TODO #9100 */;
       var controlNameDir: any /** TODO #9100 */;
 
@@ -449,7 +449,7 @@ export function main() {
 
         var parent = new FormGroupDirective([], []);
         parent.form = new FormGroup({'name': formModel});
-        controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]);
+        controlNameDir = new FormControlName(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 0a5738d5e1..22b14d3192 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, FormGroupDirective, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
+import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, REACTIVE_FORM_DIRECTIVES, 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';
@@ -23,7 +23,7 @@ export function main() {
            [TestComponentBuilder, AsyncTestCompleter],
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
                </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -42,7 +42,7 @@ export function main() {
            [TestComponentBuilder, AsyncTestCompleter],
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
                </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -59,7 +59,7 @@ export function main() {
              var form = new FormGroup({'login': new FormControl('oldValue')});
 
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
               </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -82,7 +82,7 @@ export function main() {
              var form = new FormGroup({'login': new FormControl('oldValue')});
 
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
               </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -201,7 +201,7 @@ export function main() {
            [TestComponentBuilder, AsyncTestCompleter],
            (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
                </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -227,7 +227,7 @@ export function main() {
              var form = new FormGroup({'login': login});
 
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
                </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -252,7 +252,7 @@ export function main() {
              var form = new FormGroup({'login': login});
 
              const t = `<div [formGroup]="form">
-                <input type="text" ngControl="login">
+                <input type="text" formControlName="login">
                </div>`;
 
              tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -276,7 +276,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <input type="text" ngControl="text">
+                  <input type="text" formControlName="text">
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -300,7 +300,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <input ngControl="text">
+                  <input formControlName="text">
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -323,7 +323,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <textarea ngControl="text"></textarea>
+                  <textarea formControlName="text"></textarea>
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -347,7 +347,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <input type="checkbox" ngControl="checkbox">
+                  <input type="checkbox" formControlName="checkbox">
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -373,7 +373,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <input type="number" ngControl="num">
+                  <input type="number" formControlName="num">
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -397,7 +397,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <input type="number" ngControl="num" required>
+                  <input type="number" formControlName="num" required>
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -428,7 +428,7 @@ export function main() {
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                var form = new FormGroup({'num': new FormControl(10)});
                const t = `<div [formGroup]="form">
-                  <input type="number" ngControl="num" [(ngModel)]="data">
+                  <input type="number" formControlName="num" [(ngModel)]="data">
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -448,8 +448,8 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<form [formGroup]="form">
-                  <input type="radio" ngControl="foodChicken" name="food">
-                  <input type="radio" ngControl="foodFish" name="food">
+                  <input type="radio" formControlName="foodChicken" name="food">
+                  <input type="radio" formControlName="foodFish" name="food">
                 </form>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -524,7 +524,7 @@ export function main() {
                [TestComponentBuilder, AsyncTestCompleter],
                (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                  const t = `<div [formGroup]="form">
-                    <select ngControl="city">
+                    <select formControlName="city">
                       <option value="SF"></option>
                       <option value="NYC"></option>
                     </select>
@@ -556,7 +556,7 @@ export function main() {
         it('with a dynamic list of options',
            fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
              const t = `<div [formGroup]="form">
-                      <select ngControl="city">
+                      <select formControlName="city">
                         <option *ngFor="let c of data" [value]="c"></option>
                       </select>
                   </div>`;
@@ -795,7 +795,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <input type="text" ngControl="name" wrapped-value>
+                  <input type="text" formControlName="name" wrapped-value>
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -818,7 +818,7 @@ export function main() {
              [TestComponentBuilder, AsyncTestCompleter],
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                const t = `<div [formGroup]="form">
-                  <my-input ngControl="name"></my-input>
+                  <my-input formControlName="name"></my-input>
                 </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -853,9 +853,9 @@ export function main() {
                });
 
                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">
+                    <input type="text" formControlName="login" required>
+                    <input type="text" formControlName="min" minlength="3">
+                    <input type="text" formControlName="max" maxlength="3">
                  </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -897,7 +897,7 @@ export function main() {
            var form = new FormGroup({'login': new FormControl('')});
 
            const t = `<div [formGroup]="form">
-                    <input type="text" ngControl="login" uniq-login-validator="expected">
+                    <input type="text" formControlName="login" uniq-login-validator="expected">
                  </div>`;
 
            var rootTC: any /** TODO #9100 */;
@@ -928,7 +928,7 @@ export function main() {
                var form = new FormGroup({'login': new FormControl('aa', Validators.required)});
 
                const t = `<div [formGroup]="form">
-                  <input type="text" ngControl="login">
+                  <input type="text" formControlName="login">
                  </div>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@@ -953,7 +953,7 @@ export function main() {
            var form = new FormGroup({'login': control});
 
            const t = `<div [formGroup]="form">
-                  <input type="text" ngControl="login">
+                  <input type="text" formControlName="login">
                  </div>`;
 
            var fixture: any /** TODO #9100 */;
@@ -992,7 +992,7 @@ export function main() {
 
                const t = `<div [formGroup]="form">
                   <div ngControlGroup="nested">
-                    <input type="text" ngControl="login">
+                    <input type="text" formControlName="login">
                   </div>
               </div>`;
 
@@ -1015,7 +1015,7 @@ export function main() {
 
                const t = `<div [formGroup]="form">
                     <div ngControlGroup="nested">
-                      <input type="text" ngControl="login">
+                      <input type="text" formControlName="login">
                     </div>
                 </div>`;
 
@@ -1038,7 +1038,7 @@ export function main() {
          var form = new FormGroup({'name': new FormControl('')});
 
          const t =
-             `<div [formGroup]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
+             `<div [formGroup]="form"><input type="text" formControlName="name" [(ngModel)]="name"></div>`;
 
          let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
          tick();
@@ -1084,7 +1084,7 @@ export function main() {
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            const t = `<form>
                      <div ngControlGroup="user">
-                      <input type="text" ngControl="login">
+                      <input type="text" formControlName="login">
                      </div>
                </form>`;
 
@@ -1137,7 +1137,7 @@ export function main() {
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            const t = `<form>
                     <div *ngIf="name == 'show'">
-                      <input type="text" ngControl="login">
+                      <input type="text" formControlName="login">
                     </div>
                   </form>`;
 
@@ -1162,7 +1162,7 @@ export function main() {
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            const t = `<form>
                      <div *ngIf="name=='show'" ngControlGroup="user">
-                      <input type="text" ngControl="login">
+                      <input type="text" name="login" ngModel>
                      </div>
                </form>`;
 
@@ -1186,7 +1186,7 @@ export function main() {
       it('should support ngModel for complex forms',
          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
            const t = `<form>
-                      <input type="text" ngControl="name" [(ngModel)]="name">
+                      <input type="text" name="name" [(ngModel)]="name">
                </form>`;
 
            let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
@@ -1262,76 +1262,77 @@ export function main() {
              }));
 
 
-      it('should support <type=radio>',
-         fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-           const t = `<form>
-                  <input type="radio" name="food" ngControl="chicken" [(ngModel)]="data['chicken']">
-                  <input type="radio" name="food" ngControl="fish" [(ngModel)]="data['fish']">
-                  <input type="radio" name="food" ngControl="beef" [(ngModel)]="data['beef']">
-                  <input type="radio" name="food" ngControl="pork" [(ngModel)]="data['pork']">
+      // TODO(kara): Fix when re-doing radio buttons
+      xit('should support <type=radio>',
+          fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+            const t = `<form>
+                  <input type="radio" name="food" [(ngModel)]="data['chicken']">
+                  <input type="radio" name="food" [(ngModel)]="data['fish']">
+                  <input type="radio" name="food" [(ngModel)]="data['beef']">
+                  <input type="radio" name="food" [(ngModel)]="data['pork']">
                 </form>`;
 
-           const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
-           tick();
+            const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
+            tick();
 
-           fixture.debugElement.componentInstance.data = {
-             'chicken': new RadioButtonState(false, 'chicken'),
-             'fish': new RadioButtonState(true, 'fish'),
-             'beef': new RadioButtonState(false, 'beef'),
-             'pork': new RadioButtonState(true, 'pork')
-           };
-           fixture.detectChanges();
-           tick();
+            fixture.debugElement.componentInstance.data = {
+              'chicken': new RadioButtonState(false, 'chicken'),
+              'fish': new RadioButtonState(true, 'fish'),
+              'beef': new RadioButtonState(false, 'beef'),
+              'pork': new RadioButtonState(true, 'pork')
+            };
+            fixture.detectChanges();
+            tick();
 
-           const input = fixture.debugElement.query(By.css('input'));
-           expect(input.nativeElement.checked).toEqual(false);
+            const input = fixture.debugElement.query(By.css('input'));
+            expect(input.nativeElement.checked).toEqual(false);
 
-           dispatchEvent(input.nativeElement, 'change');
-           tick();
+            dispatchEvent(input.nativeElement, 'change');
+            tick();
 
-           const data = fixture.debugElement.componentInstance.data;
+            const data = fixture.debugElement.componentInstance.data;
 
-           expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
-           expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
-           expect(data['beef']).toEqual(new RadioButtonState(false, 'beef'));
-           expect(data['pork']).toEqual(new RadioButtonState(false, 'pork'));
-         })));
+            expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
+            expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
+            expect(data['beef']).toEqual(new RadioButtonState(false, 'beef'));
+            expect(data['pork']).toEqual(new RadioButtonState(false, 'pork'));
+          })));
     });
 
-    it('should support multiple named <type=radio> groups',
-       fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
-         const t = `<form>
-                  <input type="radio" name="food" ngControl="chicken" [(ngModel)]="data['chicken']">
-                  <input type="radio" name="food" ngControl="fish" [(ngModel)]="data['fish']">
-                  <input type="radio" name="drink" ngControl="cola" [(ngModel)]="data['cola']">
-                  <input type="radio" name="drink" ngControl="sprite" [(ngModel)]="data['sprite']">
+    xit('should support multiple named <type=radio> groups',
+        fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+          const t = `<form>
+                  <input type="radio" name="food" [(ngModel)]="data['chicken']">
+                  <input type="radio" name="food"  [(ngModel)]="data['fish']">
+                  <input type="radio" name="drink" [(ngModel)]="data['cola']">
+                  <input type="radio" name="drink" [(ngModel)]="data['sprite']">
                 </form>`;
 
-         const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
-         tick();
+          const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
+          tick();
 
-         fixture.debugElement.componentInstance.data = {
-           'chicken': new RadioButtonState(false, 'chicken'),
-           'fish': new RadioButtonState(true, 'fish'),
-           'cola': new RadioButtonState(false, 'cola'),
-           'sprite': new RadioButtonState(true, 'sprite')
-         };
-         fixture.detectChanges();
-         tick();
+          fixture.debugElement.componentInstance.data = {
+            'chicken': new RadioButtonState(false, 'chicken'),
+            'fish': new RadioButtonState(true, 'fish'),
+            'cola': new RadioButtonState(false, 'cola'),
+            'sprite': new RadioButtonState(true, 'sprite')
+          };
+          fixture.detectChanges();
+          tick();
 
-         const input = fixture.debugElement.query(By.css('input'));
-         expect(input.nativeElement.checked).toEqual(false);
+          const input = fixture.debugElement.query(By.css('input'));
+          expect(input.nativeElement.checked).toEqual(false);
 
-         dispatchEvent(input.nativeElement, 'change');
-         tick();
+          dispatchEvent(input.nativeElement, 'change');
+          tick();
 
-         const data = fixture.debugElement.componentInstance.data;
+          const data = fixture.debugElement.componentInstance.data;
 
-         expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
-         expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
-         expect(data['cola']).toEqual(new RadioButtonState(false, 'cola'));
-         expect(data['sprite']).toEqual(new RadioButtonState(true, 'sprite'));
-       })));
+          expect(data['chicken']).toEqual(new RadioButtonState(true, 'chicken'));
+          expect(data['fish']).toEqual(new RadioButtonState(false, 'fish'));
+          expect(data['cola']).toEqual(new RadioButtonState(false, 'cola'));
+          expect(data['sprite']).toEqual(new RadioButtonState(true, 'sprite'));
+        })));
 
     describe('setting status classes', () => {
       it('should work with single fields',
@@ -1373,7 +1374,8 @@ export function main() {
              (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
                var form = new FormGroup({'name': new FormControl('', Validators.required)});
 
-               const t = `<form [formGroup]="form"><input type="text" ngControl="name"></form>`;
+               const t =
+                   `<form [formGroup]="form"><input type="text" formControlName="name"></form>`;
 
                tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
                  fixture.debugElement.componentInstance.form = form;
@@ -1491,7 +1493,7 @@ export function main() {
            // from form.control before it was set. This test verifies this bug is
            // fixed.
            const t = `<form><div ngControlGroup="x" #x="ngForm">
-                  <input type="text" ngControl="test"></div>{{x.valid}}</form>`;
+                  <input type="text" name="test" ngModel></div>{{x.valid}}</form>`;
            let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
            tick();
            fixture.detectChanges();
@@ -1583,7 +1585,7 @@ class UniqLoginValidator implements Validator {
   template: '',
   directives: [
     FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
-    FormControlDirective, FormGroupDirective
+    REACTIVE_FORM_DIRECTIVES
   ],
   providers: [FORM_PROVIDERS]
 })