feat(forms): renamed control, control-group into ng-control and ng-control-group

modules/angular2/src/forms/directives/checkbox_value_accessor.ts

@@ -9,14 +9,14 @@ import {ControlValueAccessor} from './control_value_accessor';
  *
  *  # Example
  *  ```
- *  <input type="checkbox" [control]="rememberLogin">
+ *  <input type="checkbox" [ng-control]="rememberLogin">
  *  ```
  *
  * @exportedAs angular2/forms
  */
 @Directive({
   selector:
-      'input[type=checkbox][control],input[type=checkbox][form-control],input[type=checkbox][ng-model]',
+      'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
   hostListeners: {'change': 'onChange($event.target.checked)'},
   hostProperties: {'checked': 'checked'}
 })

modules/angular2/src/forms/directives/control_directive.ts

@@ -2,7 +2,7 @@ import {ControlValueAccessor} from './control_value_accessor';
 import {Validators} from '../validators';
 
 /**
- * A directive that bind a [Control] object to a DOM element.
+ * A directive that bind a [ng-control] object to a DOM element.
  *
  * @exportedAs angular2/forms
  */

modules/angular2/src/forms/directives/control_group_directive.ts

@@ -10,11 +10,11 @@ const controlGroupBinding = CONST_EXPR(
     new Binding(ControlContainerDirective, {toAlias: FORWARD_REF(() => ControlGroupDirective)}));
 
 /**
- * Binds a control group to a DOM element.
+ * Binds a ng-control group to a DOM element.
  *
  * # Example
  *
- * In this example, we create a control group, and we bind the login and
+ * In this example, we create a ng-control group, and we bind the login and
  * password controls to the login and password elements.
  *
  * Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
@@ -25,10 +25,10 @@ const controlGroupBinding = CONST_EXPR(
  * @View({
  *      directives: [formDirectives],
  *      template:
- *              "<form [form-model]='loginForm'>" +
+ *              "<form [ng-form-model]='loginForm'>" +
- *              "<div control-group="credentials">
+ *              "<div ng-control-group="credentials">
- *              "Login <input type='text' control='login'>" +
+ *              "Login <input type='text' ng-control='login'>" +
- *              "Password <input type='password' control='password'>" +
+ *              "Password <input type='password' ng-control='password'>" +
  *              "<button (click)="onLogin()">Login</button>" +
  *              "</div>"
  *              "</form>"
@@ -39,7 +39,7 @@ const controlGroupBinding = CONST_EXPR(
  *  constructor() {
  *    this.loginForm = new ControlGroup({
  *      credentials: new ControlGroup({
- *        login: new Control(""),
+ *        login: new Cntrol(""),
  *        password: new Control("")
  *      })
  *    });
@@ -55,9 +55,9 @@ const controlGroupBinding = CONST_EXPR(
  * @exportedAs angular2/forms
  */
 @Directive({
-  selector: '[control-group]',
+  selector: '[ng-control-group]',
   hostInjector: [controlGroupBinding],
-  properties: ['name: control-group'],
+  properties: ['name: ng-control-group'],
   lifecycle: [onInit, onDestroy]
 })
 export class ControlGroupDirective extends ControlContainerDirective {

modules/angular2/src/forms/directives/control_name_directive.ts

@@ -31,8 +31,8 @@ const controlNameBinding =
  * @View({
  *      directives: [formDirectives],
  *      template:
- *              "<form [form-model]='loginForm'>" +
+ *              "<form [ng-form-model]='loginForm'>" +
- *              "Login <input type='text' control='login'>" +
+ *              "Login <input type='text' ng-control='login'>" +
  *              "<button (click)="onLogin()">Login</button>" +
  *              "</form>"
  *      })
@@ -55,9 +55,9 @@ const controlNameBinding =
  * @exportedAs angular2/forms
  */
 @Directive({
-  selector: '[control]',
+  selector: '[ng-control]',
   hostInjector: [controlNameBinding],
-  properties: ['name: control', 'model: ng-model'],
+  properties: ['name: ng-control', 'model: ng-model'],
   events: ['ngModel'],
   lifecycle: [onDestroy, onChange]
 })

modules/angular2/src/forms/directives/default_value_accessor.ts

@@ -11,15 +11,14 @@ import {ControlValueAccessor} from './control_value_accessor';
  *
  *  # Example
  *  ```
- *  <input type="text" [form-control]="loginControl">
+ *  <input type="text" [ng-form-control]="loginControl">
  *  ```
  *
  * @exportedAs angular2/forms
  */
 @Directive({
-  selector: 'input:not([type=checkbox])[control],textarea[control],' +
+  selector:
-                'input:not([type=checkbox])[form-control],textarea[form-control],' +
+      'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]',
-                'input:not([type=checkbox])[ng-model],textarea[ng-model]',
   hostListeners:
       {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
   hostProperties: {'value': 'value'}

modules/angular2/src/forms/directives/form_control_directive.ts

@@ -30,7 +30,7 @@ const formControlBinding =
  * @Component({selector: "login-comp"})
  * @View({
  *      directives: [formDirectives],
- *      template: "<input type='text' [form-control]='loginControl'>"
+ *      template: "<input type='text' [ng-form-control]='loginControl'>"
  *      })
  * class LoginComp {
  *  loginControl:Control;
@@ -45,9 +45,9 @@ const formControlBinding =
  * @exportedAs angular2/forms
  */
 @Directive({
-  selector: '[form-control]',
+  selector: '[ng-form-control]',
   hostInjector: [formControlBinding],
-  properties: ['control: form-control', 'model: ng-model'],
+  properties: ['control: ng-form-control', 'model: ng-model'],
   events: ['ngModel'],
   lifecycle: [onChange]
 })

modules/angular2/src/forms/directives/form_model_directive.ts

@@ -28,9 +28,9 @@ const formDirectiveBinding = CONST_EXPR(
  * @Component({selector: "login-comp"})
  * @View({
  *      directives: [formDirectives],
- *      template: "<form [form-model]='loginForm'>" +
+ *      template: "<form [ng-form-model]='loginForm'>" +
- *              "Login <input type='text' control='login'>" +
+ *              "Login <input type='text' ng-control='login'>" +
- *              "Password <input type='password' control='password'>" +
+ *              "Password <input type='password' ng-control='password'>" +
  *              "<button (click)="onLogin()">Login</button>" +
  *              "</form>"
  *      })
@@ -54,9 +54,9 @@ const formDirectiveBinding = CONST_EXPR(
  * @exportedAs angular2/forms
  */
 @Directive({
-  selector: '[form-model]',
+  selector: '[ng-form-model]',
   hostInjector: [formDirectiveBinding],
-  properties: ['form: form-model'],
+  properties: ['form: ng-form-model'],
   lifecycle: [onChange]
 })
 export class FormModelDirective extends ControlContainerDirective implements FormDirective {

modules/angular2/src/forms/directives/ng_model_directive.ts

@@ -13,7 +13,7 @@ const formControlBinding =
     CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => NgModelDirective)}));
 
 @Directive({
-  selector: '[ng-model]:not([control]):not([form-control])',
+  selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
   hostInjector: [formControlBinding],
   properties: ['model: ng-model'],
   events: ['ngModel'],

modules/angular2/src/forms/directives/select_control_value_accessor.ts

@@ -11,13 +11,13 @@ import {ControlValueAccessor} from './control_value_accessor';
  *
  *  # Example
  *  ```
- *  <input type="text" [control]="loginControl">
+ *  <input type="text" [ng-control]="loginControl">
  *  ```
  *
  * @exportedAs angular2/forms
  */
 @Directive({
-  selector: 'select[control],select[form-control],select[ng-model]',
+  selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
   hostListeners:
       {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
   hostProperties: {'value': 'value'}

modules/angular2/src/forms/directives/template_driven_form_directive.ts

@@ -14,7 +14,7 @@ const formDirectiveBinding = CONST_EXPR(new Binding(
     ControlContainerDirective, {toAlias: FORWARD_REF(() => TemplateDrivenFormDirective)}));
 
 @Directive({
-  selector: 'form:not([ng-no-form]):not([form-model]),ng-form,[ng-form]',
+  selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
   hostInjector: [formDirectiveBinding]
 })
 export class TemplateDrivenFormDirective extends ControlContainerDirective implements

modules/angular2/test/forms/integration_spec.ts

@@ -37,8 +37,8 @@ export function main() {
        inject([TestBed, AsyncTestCompleter], (tb, async) => {
          var ctx = MyComp.create({form: new ControlGroup({"login": new Control("loginValue")})});
 
-         var t = `<div [form-model]="form">
+         var t = `<div [ng-form-model]="form">
-                <input type="text" control="login">
+                <input type="text" ng-control="login">
                </div>`;
 
          tb.createView(MyComp, {context: ctx, html: t})
@@ -56,8 +56,8 @@ export function main() {
          var form = new ControlGroup({"login": new Control("oldValue")});
          var ctx = MyComp.create({form: form});
 
-         var t = `<div [form-model]="form">
+         var t = `<div [ng-form-model]="form">
-                <input type="text" control="login">
+                <input type="text" ng-control="login">
               </div>`;
 
          tb.createView(MyComp, {context: ctx, html: t})
@@ -77,7 +77,7 @@ export function main() {
          var control = new Control("loginValue");
          var ctx = MyComp.create({form: control});
 
-         var t = `<div><input type="text" [form-control]="form"></div>`;
+         var t = `<div><input type="text" [ng-form-control]="form"></div>`;
 
          tb.createView(MyComp, {context: ctx, html: t})
              .then((view) => {
@@ -98,8 +98,8 @@ export function main() {
          var form = new ControlGroup({"login": new Control("oldValue")});
          var ctx = MyComp.create({form: form});
 
-         var t = `<div [form-model]="form">
+         var t = `<div [ng-form-model]="form">
-                <input type="text" control="login">
+                <input type="text" ng-control="login">
                </div>`;
 
          tb.createView(MyComp, {context: ctx, html: t})
@@ -120,8 +120,8 @@ export function main() {
          var form = new ControlGroup({"login": login});
          var ctx = MyComp.create({form: form});
 
-         var t = `<div [form-model]="form">
+         var t = `<div [ng-form-model]="form">
-                <input type="text" control="login">
+                <input type="text" ng-control="login">
                </div>`;
 
          tb.createView(MyComp, {context: ctx, html: t})
@@ -142,8 +142,8 @@ export function main() {
       it("should support <input type=text>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
            var ctx = MyComp.create({form: new ControlGroup({"text": new Control("old")})});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <input type="text" control="text">
+                  <input type="text" ng-control="text">
                 </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -164,8 +164,8 @@ export function main() {
          inject([TestBed, AsyncTestCompleter], (tb, async) => {
            var ctx = MyComp.create({form: new ControlGroup({"text": new Control("old")})});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <input control="text">
+                  <input ng-control="text">
                 </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -185,8 +185,8 @@ export function main() {
       it("should support <textarea>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
            var ctx = MyComp.create({form: new ControlGroup({"text": new Control('old')})});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <textarea control="text"></textarea>
+                  <textarea ng-control="text"></textarea>
                 </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -206,8 +206,8 @@ export function main() {
       it("should support <type=checkbox>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
            var ctx = MyComp.create({form: new ControlGroup({"checkbox": new Control(true)})});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <input type="checkbox" control="checkbox">
+                  <input type="checkbox" ng-control="checkbox">
                 </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -227,8 +227,8 @@ export function main() {
       it("should support <select>", inject([TestBed, AsyncTestCompleter], (tb, async) => {
            var ctx = MyComp.create({form: new ControlGroup({"city": new Control("SF")})});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                    <select control="city">
+                    <select ng-control="city">
                       <option value="SF"></option>
                       <option value="NYC"></option>
                     </select>
@@ -255,8 +255,8 @@ export function main() {
          inject([TestBed, AsyncTestCompleter], (tb, async) => {
            var ctx = MyComp.create({form: new ControlGroup({"name": new Control("aa")})});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <input type="text" control="name" wrapped-value>
+                  <input type="text" ng-control="name" wrapped-value>
                 </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -280,8 +280,8 @@ export function main() {
            var form = new ControlGroup({"login": new Control("aa")});
            var ctx = MyComp.create({form: form});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <input type="text" control="login" required>
+                  <input type="text" ng-control="login" required>
                  </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -304,8 +304,8 @@ export function main() {
            var form = new ControlGroup({"login": new Control("aa", Validators.required)});
            var ctx = MyComp.create({form: form});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <input type="text" control="login">
+                  <input type="text" ng-control="login">
                  </div>`;
 
            tb.createView(MyComp, {context: ctx, html: t})
@@ -331,9 +331,9 @@ export function main() {
                new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
            var ctx = MyComp.create({form: form});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                  <div control-group="nested">
+                  <div ng-control-group="nested">
-                    <input type="text" control="login">
+                    <input type="text" ng-control="login">
                   </div>
               </div>`;
 
@@ -352,9 +352,9 @@ export function main() {
                new ControlGroup({"nested": new ControlGroup({"login": new Control("value")})});
            var ctx = MyComp.create({form: form});
 
-           var t = `<div [form-model]="form">
+           var t = `<div [ng-form-model]="form">
-                    <div control-group="nested">
+                    <div ng-control-group="nested">
-                      <input type="text" control="login">
+                      <input type="text" ng-control="login">
                     </div>
                 </div>`;
 
@@ -379,7 +379,7 @@ export function main() {
              var ctx = MyComp.create({name: "oldValue", form: form});
 
              var t =
-                 `<div [form-model]="form"><input type="text" control="name" [(ng-model)]="name"></div>`;
+                 `<div [ng-form-model]="form"><input type="text" ng-control="name" [(ng-model)]="name"></div>`;
 
              tb.createView(MyComp, {context: ctx, html: t})
                  .then((view) => {
@@ -403,7 +403,8 @@ export function main() {
                 var form = new Control("");
                 var ctx = MyComp.create({name: "oldValue", form: form});
 
-                var t = `<div><input type="text" [form-control]="form" [(ng-model)]="name"></div>`;
+                var t =
+                    `<div><input type="text" [ng-form-control]="form" [(ng-model)]="name"></div>`;
 
                 tb.createView(MyComp, {context: ctx, html: t})
                     .then((view) => {
@@ -428,8 +429,8 @@ export function main() {
                   var ctx = MyComp.create({name: null});
 
                   var t = `<form>
-                     <div control-group="user">
+                     <div ng-control-group="user">
-                      <input type="text" control="login">
+                      <input type="text" ng-control="login">
                      </div>
                </form>`;
 
@@ -469,7 +470,7 @@ export function main() {
 
                                             var t = `<form>
                     <div *ng-if="name == 'show'">
-                      <input type="text" control="login">
+                      <input type="text" ng-control="login">
                     </div>
                   </form>`;
 
@@ -498,8 +499,8 @@ export function main() {
 
 
                   var t = `<form>
-                     <div *ng-if="name=='show'" control-group="user">
+                     <div *ng-if="name=='show'" ng-control-group="user">
-                      <input type="text" control="login">
+                      <input type="text" ng-control="login">
                      </div>
                </form>`;
 
@@ -526,9 +527,9 @@ export function main() {
          inject([TestBed], fakeAsync(tb => {
                   var ctx = MyComp.create({name: "oldValue"});
 
-                  var t = `<div form>
+                  var t = `<form>
-                      <input type="text" control="name" [(ng-model)]="name">
+                      <input type="text" ng-control="name" [(ng-model)]="name">
-               </div>`;
+               </form>`;
 
                   tb.createView(MyComp, {context: ctx, html: t})
                       .then((view) => {