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

This commit is contained in:
vsavkin 2015-06-02 14:53:49 -07:00
parent 6bef1c4169
commit f543834be9
11 changed files with 73 additions and 73 deletions

View File

@ -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'}
})

View File

@ -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
*/

View File

@ -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 {

View File

@ -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]
})

View File

@ -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'}

View File

@ -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]
})

View File

@ -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 {

View File

@ -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'],

View File

@ -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'}

View File

@ -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

View File

@ -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) => {