feat(forms): renamed control, control-group into ng-control and ng-control-group
This commit is contained in:
		
							parent
							
								
									6bef1c4169
								
							
						
					
					
						commit
						f543834be9
					
				| @ -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'} | ||||
| }) | ||||
|  | ||||
| @ -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 | ||||
|  */ | ||||
|  | ||||
| @ -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'>" + | ||||
|  *              "<div control-group="credentials"> | ||||
|  *              "Login <input type='text' control='login'>" + | ||||
|  *              "Password <input type='password' control='password'>" + | ||||
|  *              "<form [ng-form-model]='loginForm'>" + | ||||
|  *              "<div ng-control-group="credentials"> | ||||
|  *              "Login <input type='text' ng-control='login'>" + | ||||
|  *              "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 { | ||||
|  | ||||
| @ -31,8 +31,8 @@ const controlNameBinding = | ||||
|  * @View({ | ||||
|  *      directives: [formDirectives], | ||||
|  *      template: | ||||
|  *              "<form [form-model]='loginForm'>" + | ||||
|  *              "Login <input type='text' control='login'>" + | ||||
|  *              "<form [ng-form-model]='loginForm'>" + | ||||
|  *              "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] | ||||
| }) | ||||
|  | ||||
| @ -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],' + | ||||
|                 'input:not([type=checkbox])[form-control],textarea[form-control],' + | ||||
|                 'input:not([type=checkbox])[ng-model],textarea[ng-model]', | ||||
|   selector: | ||||
|       '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]', | ||||
|   hostListeners: | ||||
|       {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'}, | ||||
|   hostProperties: {'value': 'value'} | ||||
|  | ||||
| @ -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] | ||||
| }) | ||||
|  | ||||
| @ -28,9 +28,9 @@ const formDirectiveBinding = CONST_EXPR( | ||||
|  * @Component({selector: "login-comp"}) | ||||
|  * @View({ | ||||
|  *      directives: [formDirectives], | ||||
|  *      template: "<form [form-model]='loginForm'>" + | ||||
|  *              "Login <input type='text' control='login'>" + | ||||
|  *              "Password <input type='password' control='password'>" + | ||||
|  *      template: "<form [ng-form-model]='loginForm'>" + | ||||
|  *              "Login <input type='text' ng-control='login'>" + | ||||
|  *              "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 { | ||||
|  | ||||
| @ -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'], | ||||
|  | ||||
| @ -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'} | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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">
 | ||||
|                 <input type="text" control="login"> | ||||
|          var t = `<div [ng-form-model]="form">
 | ||||
|                 <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">
 | ||||
|                 <input type="text" control="login"> | ||||
|          var t = `<div [ng-form-model]="form">
 | ||||
|                 <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">
 | ||||
|                 <input type="text" control="login"> | ||||
|          var t = `<div [ng-form-model]="form">
 | ||||
|                 <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">
 | ||||
|                 <input type="text" control="login"> | ||||
|          var t = `<div [ng-form-model]="form">
 | ||||
|                 <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">
 | ||||
|                   <input type="text" control="text"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                   <input control="text"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                   <textarea control="text"></textarea> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                   <input type="checkbox" control="checkbox"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                     <select control="city"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                     <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">
 | ||||
|                   <input type="text" control="name" wrapped-value> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                   <input type="text" control="login" required> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                   <input type="text" control="login"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <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">
 | ||||
|                   <div control-group="nested"> | ||||
|                     <input type="text" control="login"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                   <div ng-control-group="nested"> | ||||
|                     <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">
 | ||||
|                     <div control-group="nested"> | ||||
|                       <input type="text" control="login"> | ||||
|            var t = `<div [ng-form-model]="form">
 | ||||
|                     <div ng-control-group="nested"> | ||||
|                       <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"> | ||||
|                       <input type="text" control="login"> | ||||
|                      <div ng-control-group="user"> | ||||
|                       <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"> | ||||
|                       <input type="text" control="login"> | ||||
|                      <div *ng-if="name=='show'" ng-control-group="user"> | ||||
|                       <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>
 | ||||
|                       <input type="text" control="name" [(ng-model)]="name"> | ||||
|                </div>`;
 | ||||
|                   var t = `<form>
 | ||||
|                       <input type="text" ng-control="name" [(ng-model)]="name"> | ||||
|                </form>`;
 | ||||
| 
 | ||||
|                   tb.createView(MyComp, {context: ctx, html: t}) | ||||
|                       .then((view) => { | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user