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…
Reference in New Issue