refactor(forms): made directive names consistent
This commit is contained in:
parent
a858f6ac42
commit
4fe919335c
@ -18,8 +18,8 @@ export * from './src/core/compiler/element_injector';
|
||||
// We export the Directive *annotation* instead of the *decorator*.
|
||||
// But it breaks the build.
|
||||
export {Directive, LifecycleEvent} from './src/core/annotations_impl/annotations';
|
||||
export {FormDirective} from './src/forms/directives/form_directive';
|
||||
export {ControlContainerDirective} from './src/forms/directives/control_container_directive';
|
||||
export {Form} from './src/forms/directives/form_interface';
|
||||
export {ControlContainer} from './src/forms/directives/control_container';
|
||||
export {Injectable} from './src/di/annotations_impl';
|
||||
export {BaseQueryList} from './src/core/compiler/base_query_list';
|
||||
export {AppProtoView, AppView, AppViewContainer} from './src/core/compiler/view';
|
||||
|
@ -16,7 +16,7 @@
|
||||
export * from './src/forms/model';
|
||||
export * from './src/forms/directives';
|
||||
export * from './src/forms/validators';
|
||||
export * from './src/forms/validator_directives';
|
||||
export * from './src/forms/directives/validators';
|
||||
export * from './src/forms/form_builder';
|
||||
|
||||
import {FormBuilder} from './src/forms/form_builder';
|
||||
|
@ -1,27 +1,27 @@
|
||||
import {Type, CONST_EXPR} from 'angular2/src/facade/lang';
|
||||
import {ControlNameDirective} from './directives/control_name_directive';
|
||||
import {FormControlDirective} from './directives/form_control_directive';
|
||||
import {NgModelDirective} from './directives/ng_model_directive';
|
||||
import {ControlGroupDirective} from './directives/control_group_directive';
|
||||
import {FormModelDirective} from './directives/form_model_directive';
|
||||
import {TemplateDrivenFormDirective} from './directives/template_driven_form_directive';
|
||||
import {NgControlName} from './directives/ng_control_name';
|
||||
import {NgFormControl} from './directives/ng_form_control';
|
||||
import {NgModel} from './directives/ng_model';
|
||||
import {NgControlGroup} from './directives/ng_control_group';
|
||||
import {NgFormModel} from './directives/ng_form_model';
|
||||
import {NgForm} from './directives/ng_form';
|
||||
import {DefaultValueAccessor} from './directives/default_value_accessor';
|
||||
import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
|
||||
import {SelectControlValueAccessor} from './directives/select_control_value_accessor';
|
||||
import {RequiredValidatorDirective} from './validator_directives';
|
||||
import {NgRequiredValidator} from './directives/validators';
|
||||
|
||||
export {ControlNameDirective} from './directives/control_name_directive';
|
||||
export {FormControlDirective} from './directives/form_control_directive';
|
||||
export {NgModelDirective} from './directives/ng_model_directive';
|
||||
export {ControlDirective} from './directives/control_directive';
|
||||
export {ControlGroupDirective} from './directives/control_group_directive';
|
||||
export {FormModelDirective} from './directives/form_model_directive';
|
||||
export {TemplateDrivenFormDirective} from './directives/template_driven_form_directive';
|
||||
export {NgControlName} from './directives/ng_control_name';
|
||||
export {NgFormControl} from './directives/ng_form_control';
|
||||
export {NgModel} from './directives/ng_model';
|
||||
export {NgControl} from './directives/ng_control';
|
||||
export {NgControlGroup} from './directives/ng_control_group';
|
||||
export {NgFormModel} from './directives/ng_form_model';
|
||||
export {NgForm} from './directives/ng_form';
|
||||
export {ControlValueAccessor} from './directives/control_value_accessor';
|
||||
export {DefaultValueAccessor} from './directives/default_value_accessor';
|
||||
export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
|
||||
export {SelectControlValueAccessor} from './directives/select_control_value_accessor';
|
||||
export {RequiredValidatorDirective} from './validator_directives';
|
||||
export {NgRequiredValidator} from './directives/validators';
|
||||
|
||||
/**
|
||||
*
|
||||
@ -32,17 +32,17 @@ export {RequiredValidatorDirective} from './validator_directives';
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
export const formDirectives: List<Type> = CONST_EXPR([
|
||||
ControlNameDirective,
|
||||
ControlGroupDirective,
|
||||
NgControlName,
|
||||
NgControlGroup,
|
||||
|
||||
FormControlDirective,
|
||||
NgModelDirective,
|
||||
FormModelDirective,
|
||||
TemplateDrivenFormDirective,
|
||||
NgFormControl,
|
||||
NgModel,
|
||||
NgFormModel,
|
||||
NgForm,
|
||||
|
||||
DefaultValueAccessor,
|
||||
CheckboxControlValueAccessor,
|
||||
SelectControlValueAccessor,
|
||||
|
||||
RequiredValidatorDirective
|
||||
NgRequiredValidator
|
||||
]);
|
@ -1,5 +1,5 @@
|
||||
import {Directive} from 'angular2/angular2';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {ControlValueAccessor} from './control_value_accessor';
|
||||
|
||||
/**
|
||||
@ -33,7 +33,7 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
|
||||
onChange: Function;
|
||||
onTouched: Function;
|
||||
|
||||
constructor(private cd: ControlDirective) {
|
||||
constructor(private cd: NgControl) {
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
cd.valueAccessor = this;
|
||||
|
13
modules/angular2/src/forms/directives/control_container.ts
Normal file
13
modules/angular2/src/forms/directives/control_container.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import {Form} from './form_interface';
|
||||
import {List} from 'angular2/src/facade/collection';
|
||||
|
||||
/**
|
||||
* A directive that contains a group of [NgControl].
|
||||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
export class ControlContainer {
|
||||
name: string;
|
||||
get formDirective(): Form { return null; }
|
||||
get path(): List<string> { return null; }
|
||||
}
|
@ -1,13 +0,0 @@
|
||||
import {FormDirective} from './form_directive';
|
||||
import {List} from 'angular2/src/facade/collection';
|
||||
|
||||
/**
|
||||
* A directive that contains a group of [ControlDirective].
|
||||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
export class ControlContainerDirective {
|
||||
name: string;
|
||||
get formDirective(): FormDirective { return null; }
|
||||
get path(): List<string> { return null; }
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import {Directive} from 'angular2/angular2';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {ControlValueAccessor} from './control_value_accessor';
|
||||
import {isBlank} from 'angular2/src/facade/lang';
|
||||
|
||||
@ -37,7 +37,7 @@ export class DefaultValueAccessor implements ControlValueAccessor {
|
||||
onChange: Function;
|
||||
onTouched: Function;
|
||||
|
||||
constructor(private cd: ControlDirective) {
|
||||
constructor(private cd: NgControl) {
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
cd.valueAccessor = this;
|
||||
|
@ -1,12 +0,0 @@
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {ControlGroupDirective} from './control_group_directive';
|
||||
import {Control} from '../model';
|
||||
|
||||
export interface FormDirective {
|
||||
addControl(dir: ControlDirective): void;
|
||||
removeControl(dir: ControlDirective): void;
|
||||
getControl(dir: ControlDirective): Control;
|
||||
addControlGroup(dir: ControlGroupDirective): void;
|
||||
removeControlGroup(dir: ControlGroupDirective): void;
|
||||
updateModel(dir: ControlDirective, value: any): void;
|
||||
}
|
12
modules/angular2/src/forms/directives/form_interface.ts
Normal file
12
modules/angular2/src/forms/directives/form_interface.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import {NgControl} from './ng_control';
|
||||
import {NgControlGroup} from './ng_control_group';
|
||||
import {Control} from '../model';
|
||||
|
||||
export interface Form {
|
||||
addControl(dir: NgControl): void;
|
||||
removeControl(dir: NgControl): void;
|
||||
getControl(dir: NgControl): Control;
|
||||
addControlGroup(dir: NgControlGroup): void;
|
||||
removeControlGroup(dir: NgControlGroup): void;
|
||||
updateModel(dir: NgControl, value: any): void;
|
||||
}
|
@ -7,7 +7,7 @@ import {Control} from '../model';
|
||||
*
|
||||
* @exportedAs angular2/forms
|
||||
*/
|
||||
export class ControlDirective {
|
||||
export class NgControl {
|
||||
name: string = null;
|
||||
valueAccessor: ControlValueAccessor = null;
|
||||
validator: Function;
|
@ -3,11 +3,11 @@ import {Inject, FORWARD_REF, Binding} from 'angular2/di';
|
||||
import {List, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {CONST_EXPR} from 'angular2/src/facade/lang';
|
||||
|
||||
import {ControlContainerDirective} from './control_container_directive';
|
||||
import {ControlContainer} from './control_container';
|
||||
import {controlPath} from './shared';
|
||||
|
||||
const controlGroupBinding = CONST_EXPR(
|
||||
new Binding(ControlContainerDirective, {toAlias: FORWARD_REF(() => ControlGroupDirective)}));
|
||||
const controlGroupBinding =
|
||||
CONST_EXPR(new Binding(ControlContainer, {toAlias: FORWARD_REF(() => NgControlGroup)}));
|
||||
|
||||
/**
|
||||
* Binds a ng-control group to a DOM element.
|
||||
@ -18,7 +18,7 @@ const controlGroupBinding = CONST_EXPR(
|
||||
* password controls to the login and password elements.
|
||||
*
|
||||
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
|
||||
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
* `NgControl`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
*
|
||||
* ```
|
||||
* @Component({selector: "login-comp"})
|
||||
@ -61,9 +61,9 @@ const controlGroupBinding = CONST_EXPR(
|
||||
lifecycle: [onInit, onDestroy],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class ControlGroupDirective extends ControlContainerDirective {
|
||||
_parent: ControlContainerDirective;
|
||||
constructor(@Ancestor() _parent: ControlContainerDirective) {
|
||||
export class NgControlGroup extends ControlContainer {
|
||||
_parent: ControlContainer;
|
||||
constructor(@Ancestor() _parent: ControlContainer) {
|
||||
super();
|
||||
this._parent = _parent;
|
||||
}
|
@ -4,13 +4,13 @@ import {List, StringMapWrapper, StringMap} from 'angular2/src/facade/collection'
|
||||
import {Directive, Ancestor, onDestroy, onChange} from 'angular2/angular2';
|
||||
import {FORWARD_REF, Binding, Inject} from 'angular2/di';
|
||||
|
||||
import {ControlContainerDirective} from './control_container_directive';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {ControlContainer} from './control_container';
|
||||
import {NgControl} from './ng_control';
|
||||
import {controlPath} from './shared';
|
||||
import {Control} from '../model';
|
||||
|
||||
const controlNameBinding =
|
||||
CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => ControlNameDirective)}));
|
||||
CONST_EXPR(new Binding(NgControl, {toAlias: FORWARD_REF(() => NgControlName)}));
|
||||
|
||||
/**
|
||||
* Binds a control with the specified name to a DOM element.
|
||||
@ -25,7 +25,7 @@ const controlNameBinding =
|
||||
* change.
|
||||
*
|
||||
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
|
||||
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
* `NgControl`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
*
|
||||
* ```
|
||||
* @Component({selector: "login-comp"})
|
||||
@ -63,13 +63,13 @@ const controlNameBinding =
|
||||
lifecycle: [onDestroy, onChange],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class ControlNameDirective extends ControlDirective {
|
||||
_parent: ControlContainerDirective;
|
||||
export class NgControlName extends NgControl {
|
||||
_parent: ControlContainer;
|
||||
ngModel: EventEmitter;
|
||||
model: any;
|
||||
_added: boolean;
|
||||
|
||||
constructor(@Ancestor() _parent: ControlContainerDirective) {
|
||||
constructor(@Ancestor() _parent: ControlContainer) {
|
||||
super();
|
||||
this._parent = _parent;
|
||||
this.ngModel = new EventEmitter();
|
@ -3,15 +3,15 @@ import {StringMapWrapper, List, ListWrapper} from 'angular2/src/facade/collectio
|
||||
import {isPresent, isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
|
||||
import {Directive} from 'angular2/src/core/annotations/decorators';
|
||||
import {FORWARD_REF, Binding} from 'angular2/di';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {FormDirective} from './form_directive';
|
||||
import {ControlGroupDirective} from './control_group_directive';
|
||||
import {ControlContainerDirective} from './control_container_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {Form} from './form_interface';
|
||||
import {NgControlGroup} from './ng_control_group';
|
||||
import {ControlContainer} from './control_container';
|
||||
import {AbstractControl, ControlGroup, Control} from '../model';
|
||||
import {setUpControl} from './shared';
|
||||
|
||||
const formDirectiveBinding = CONST_EXPR(new Binding(
|
||||
ControlContainerDirective, {toAlias: FORWARD_REF(() => TemplateDrivenFormDirective)}));
|
||||
const formDirectiveBinding =
|
||||
CONST_EXPR(new Binding(ControlContainer, {toAlias: FORWARD_REF(() => NgForm)}));
|
||||
|
||||
@Directive({
|
||||
selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
|
||||
@ -22,8 +22,7 @@ const formDirectiveBinding = CONST_EXPR(new Binding(
|
||||
events: ['ngSubmit'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class TemplateDrivenFormDirective extends ControlContainerDirective implements
|
||||
FormDirective {
|
||||
export class NgForm extends ControlContainer implements Form {
|
||||
form: ControlGroup;
|
||||
ngSubmit = new EventEmitter();
|
||||
|
||||
@ -32,7 +31,7 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
|
||||
this.form = new ControlGroup({});
|
||||
}
|
||||
|
||||
get formDirective(): FormDirective { return this; }
|
||||
get formDirective(): Form { return this; }
|
||||
|
||||
get path(): List<string> { return []; }
|
||||
|
||||
@ -42,7 +41,7 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
|
||||
|
||||
get errors(): any { return this.form.errors; }
|
||||
|
||||
addControl(dir: ControlDirective): void {
|
||||
addControl(dir: NgControl): void {
|
||||
this._later(_ => {
|
||||
var container = this._findContainer(dir.path);
|
||||
var c = new Control("");
|
||||
@ -52,9 +51,9 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
|
||||
});
|
||||
}
|
||||
|
||||
getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
|
||||
getControl(dir: NgControl): Control { return <Control>this.form.find(dir.path); }
|
||||
|
||||
removeControl(dir: ControlDirective): void {
|
||||
removeControl(dir: NgControl): void {
|
||||
this._later(_ => {
|
||||
var container = this._findContainer(dir.path);
|
||||
if (isPresent(container)) {
|
||||
@ -64,7 +63,7 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
|
||||
});
|
||||
}
|
||||
|
||||
addControlGroup(dir: ControlGroupDirective): void {
|
||||
addControlGroup(dir: NgControlGroup): void {
|
||||
this._later(_ => {
|
||||
var container = this._findContainer(dir.path);
|
||||
var c = new ControlGroup({});
|
||||
@ -73,7 +72,7 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
|
||||
});
|
||||
}
|
||||
|
||||
removeControlGroup(dir: ControlGroupDirective): void {
|
||||
removeControlGroup(dir: NgControlGroup): void {
|
||||
this._later(_ => {
|
||||
var container = this._findContainer(dir.path);
|
||||
if (isPresent(container)) {
|
||||
@ -83,7 +82,7 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
|
||||
});
|
||||
}
|
||||
|
||||
updateModel(dir: ControlDirective, value: any): void {
|
||||
updateModel(dir: NgControl, value: any): void {
|
||||
this._later(_ => {
|
||||
var c = <Control>this.form.find(dir.path);
|
||||
c.updateValue(value);
|
@ -5,12 +5,12 @@ import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
|
||||
import {Directive, Ancestor, onChange} from 'angular2/angular2';
|
||||
import {FORWARD_REF, Binding} from 'angular2/di';
|
||||
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {Control} from '../model';
|
||||
import {setUpControl} from './shared';
|
||||
|
||||
const formControlBinding =
|
||||
CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => FormControlDirective)}));
|
||||
CONST_EXPR(new Binding(NgControl, {toAlias: FORWARD_REF(() => NgFormControl)}));
|
||||
|
||||
/**
|
||||
* Binds a control to a DOM element.
|
||||
@ -24,7 +24,7 @@ const formControlBinding =
|
||||
* change.
|
||||
*
|
||||
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
|
||||
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
* `NgControl`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
*
|
||||
* ```
|
||||
* @Component({selector: "login-comp"})
|
||||
@ -52,7 +52,7 @@ const formControlBinding =
|
||||
lifecycle: [onChange],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class FormControlDirective extends ControlDirective {
|
||||
export class NgFormControl extends NgControl {
|
||||
form: Control;
|
||||
ngModel: EventEmitter;
|
||||
_added: boolean;
|
@ -4,15 +4,15 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
|
||||
|
||||
import {Directive, onChange} from 'angular2/angular2';
|
||||
import {FORWARD_REF, Binding} from 'angular2/di';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {ControlGroupDirective} from './control_group_directive';
|
||||
import {ControlContainerDirective} from './control_container_directive';
|
||||
import {FormDirective} from './form_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {NgControlGroup} from './ng_control_group';
|
||||
import {ControlContainer} from './control_container';
|
||||
import {Form} from './form_interface';
|
||||
import {Control, ControlGroup} from '../model';
|
||||
import {setUpControl} from './shared';
|
||||
|
||||
const formDirectiveBinding = CONST_EXPR(
|
||||
new Binding(ControlContainerDirective, {toAlias: FORWARD_REF(() => FormModelDirective)}));
|
||||
const formDirectiveBinding =
|
||||
CONST_EXPR(new Binding(ControlContainer, {toAlias: FORWARD_REF(() => NgFormModel)}));
|
||||
|
||||
/**
|
||||
* Binds a control group to a DOM element.
|
||||
@ -24,7 +24,7 @@ const formDirectiveBinding = CONST_EXPR(
|
||||
* login and password elements.
|
||||
*
|
||||
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
|
||||
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
|
||||
* `NgControl`, `NgControlGroup`. This is just a shorthand for the same end result.
|
||||
*
|
||||
* ```
|
||||
* @Component({selector: "login-comp"})
|
||||
@ -66,9 +66,9 @@ const formDirectiveBinding = CONST_EXPR(
|
||||
events: ['ngSubmit'],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class FormModelDirective extends ControlContainerDirective implements FormDirective {
|
||||
export class NgFormModel extends ControlContainer implements Form {
|
||||
form: ControlGroup = null;
|
||||
directives: List<ControlDirective>;
|
||||
directives: List<NgControl>;
|
||||
ngSubmit = new EventEmitter();
|
||||
|
||||
constructor() {
|
||||
@ -78,26 +78,26 @@ export class FormModelDirective extends ControlContainerDirective implements For
|
||||
|
||||
onChange(_) { this._updateDomValue(); }
|
||||
|
||||
get formDirective(): FormDirective { return this; }
|
||||
get formDirective(): Form { return this; }
|
||||
|
||||
get path(): List<string> { return []; }
|
||||
|
||||
addControl(dir: ControlDirective): void {
|
||||
addControl(dir: NgControl): void {
|
||||
var c: any = this.form.find(dir.path);
|
||||
setUpControl(c, dir);
|
||||
c.updateValidity();
|
||||
ListWrapper.push(this.directives, dir);
|
||||
}
|
||||
|
||||
getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
|
||||
getControl(dir: NgControl): Control { return <Control>this.form.find(dir.path); }
|
||||
|
||||
removeControl(dir: ControlDirective): void { ListWrapper.remove(this.directives, dir); }
|
||||
removeControl(dir: NgControl): void { ListWrapper.remove(this.directives, dir); }
|
||||
|
||||
addControlGroup(dir: ControlGroupDirective) {}
|
||||
addControlGroup(dir: NgControlGroup) {}
|
||||
|
||||
removeControlGroup(dir: ControlGroupDirective) {}
|
||||
removeControlGroup(dir: NgControlGroup) {}
|
||||
|
||||
updateModel(dir: ControlDirective, value: any): void {
|
||||
updateModel(dir: NgControl, value: any): void {
|
||||
var c = <Control>this.form.find(dir.path);
|
||||
c.updateValue(value);
|
||||
}
|
@ -5,12 +5,12 @@ import {StringMapWrapper} from 'angular2/src/facade/collection';
|
||||
import {Directive, Ancestor, onChange} from 'angular2/angular2';
|
||||
import {FORWARD_REF, Binding} from 'angular2/di';
|
||||
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {Control} from '../model';
|
||||
import {setUpControl} from './shared';
|
||||
|
||||
const formControlBinding =
|
||||
CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => NgModelDirective)}));
|
||||
CONST_EXPR(new Binding(NgControl, {toAlias: FORWARD_REF(() => NgModel)}));
|
||||
|
||||
@Directive({
|
||||
selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
|
||||
@ -20,7 +20,7 @@ const formControlBinding =
|
||||
lifecycle: [onChange],
|
||||
exportAs: 'form'
|
||||
})
|
||||
export class NgModelDirective extends ControlDirective {
|
||||
export class NgModel extends NgControl {
|
||||
control: Control;
|
||||
ngModel: EventEmitter;
|
||||
model: any;
|
@ -1,5 +1,5 @@
|
||||
import {Directive} from 'angular2/angular2';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {NgControl} from './ng_control';
|
||||
import {ControlValueAccessor} from './control_value_accessor';
|
||||
|
||||
/**
|
||||
@ -35,7 +35,7 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
|
||||
onChange: Function;
|
||||
onTouched: Function;
|
||||
|
||||
constructor(private cd: ControlDirective) {
|
||||
constructor(private cd: NgControl) {
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
this.value = '';
|
||||
|
@ -1,18 +1,18 @@
|
||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {isBlank, BaseException} from 'angular2/src/facade/lang';
|
||||
|
||||
import {ControlContainerDirective} from './control_container_directive';
|
||||
import {ControlDirective} from './control_directive';
|
||||
import {ControlContainer} from './control_container';
|
||||
import {NgControl} from './ng_control';
|
||||
import {Control} from '../model';
|
||||
import {Validators} from '../validators';
|
||||
|
||||
export function controlPath(name, parent: ControlContainerDirective) {
|
||||
export function controlPath(name, parent: ControlContainer) {
|
||||
var p = ListWrapper.clone(parent.path);
|
||||
ListWrapper.push(p, name);
|
||||
return p;
|
||||
}
|
||||
|
||||
export function setUpControl(c: Control, dir: ControlDirective) {
|
||||
export function setUpControl(c: Control, dir: NgControl) {
|
||||
if (isBlank(c)) _throwError(dir, "Cannot find control");
|
||||
if (isBlank(dir.valueAccessor)) _throwError(dir, "No value accessor for");
|
||||
|
||||
@ -33,7 +33,7 @@ export function setUpControl(c: Control, dir: ControlDirective) {
|
||||
dir.valueAccessor.registerOnTouched(() => c.markAsTouched());
|
||||
}
|
||||
|
||||
function _throwError(dir: ControlDirective, message: string): void {
|
||||
function _throwError(dir: NgControl, message: string): void {
|
||||
var path = ListWrapper.join(dir.path, " -> ");
|
||||
throw new BaseException(`${message} '${path}'`);
|
||||
}
|
10
modules/angular2/src/forms/directives/validators.ts
Normal file
10
modules/angular2/src/forms/directives/validators.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import {Directive} from '../../../angular2';
|
||||
import {Validators} from '../validators';
|
||||
import {NgControl} from '../directives';
|
||||
|
||||
@Directive({selector: '[required]'})
|
||||
export class NgRequiredValidator {
|
||||
constructor(c: NgControl) {
|
||||
c.validator = Validators.compose([c.validator, Validators.required]);
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import {Directive} from 'angular2/angular2';
|
||||
import {Validators} from './validators';
|
||||
import {ControlDirective} from './directives';
|
||||
|
||||
@Directive({selector: '[required]'})
|
||||
export class RequiredValidatorDirective {
|
||||
constructor(c: ControlDirective) {
|
||||
c.validator = Validators.compose([c.validator, Validators.required]);
|
||||
}
|
||||
}
|
@ -16,13 +16,13 @@ import {
|
||||
import {
|
||||
ControlGroup,
|
||||
Control,
|
||||
ControlNameDirective,
|
||||
ControlGroupDirective,
|
||||
FormModelDirective,
|
||||
NgControlName,
|
||||
NgControlGroup,
|
||||
NgFormModel,
|
||||
ControlValueAccessor,
|
||||
Validators,
|
||||
TemplateDrivenFormDirective,
|
||||
FormControlDirective
|
||||
NgForm,
|
||||
NgFormControl
|
||||
} from 'angular2/forms';
|
||||
|
||||
class DummyControlValueAccessor implements ControlValueAccessor {
|
||||
@ -36,24 +36,24 @@ class DummyControlValueAccessor implements ControlValueAccessor {
|
||||
|
||||
export function main() {
|
||||
describe("Form Directives", () => {
|
||||
describe("FormModelDirective", () => {
|
||||
describe("NgFormModel", () => {
|
||||
var form;
|
||||
var formModel;
|
||||
var loginControlDir;
|
||||
|
||||
beforeEach(() => {
|
||||
form = new FormModelDirective();
|
||||
form = new NgFormModel();
|
||||
formModel = new ControlGroup({"login": new Control(null)});
|
||||
form.form = formModel;
|
||||
|
||||
loginControlDir = new ControlNameDirective(form);
|
||||
loginControlDir = new NgControlName(form);
|
||||
loginControlDir.name = "login";
|
||||
loginControlDir.valueAccessor = new DummyControlValueAccessor();
|
||||
});
|
||||
|
||||
describe("addControl", () => {
|
||||
it("should throw when no control found", () => {
|
||||
var dir = new ControlNameDirective(form);
|
||||
var dir = new NgControlName(form);
|
||||
dir.name = "invalidName";
|
||||
|
||||
expect(() => form.addControl(dir))
|
||||
@ -61,7 +61,7 @@ export function main() {
|
||||
});
|
||||
|
||||
it("should throw when no value accessor", () => {
|
||||
var dir = new ControlNameDirective(form);
|
||||
var dir = new NgControlName(form);
|
||||
dir.name = "login";
|
||||
|
||||
expect(() => form.addControl(dir))
|
||||
@ -114,20 +114,20 @@ export function main() {
|
||||
});
|
||||
});
|
||||
|
||||
describe("TemplateDrivenFormDirective", () => {
|
||||
describe("NgForm", () => {
|
||||
var form;
|
||||
var formModel;
|
||||
var loginControlDir;
|
||||
var personControlGroupDir;
|
||||
|
||||
beforeEach(() => {
|
||||
form = new TemplateDrivenFormDirective();
|
||||
form = new NgForm();
|
||||
formModel = form.form;
|
||||
|
||||
personControlGroupDir = new ControlGroupDirective(form);
|
||||
personControlGroupDir = new NgControlGroup(form);
|
||||
personControlGroupDir.name = "person";
|
||||
|
||||
loginControlDir = new ControlNameDirective(personControlGroupDir);
|
||||
loginControlDir = new NgControlName(personControlGroupDir);
|
||||
loginControlDir.name = "login";
|
||||
loginControlDir.valueAccessor = new DummyControlValueAccessor();
|
||||
});
|
||||
@ -163,12 +163,12 @@ export function main() {
|
||||
});
|
||||
});
|
||||
|
||||
describe("FormControlDirective", () => {
|
||||
describe("NgFormControl", () => {
|
||||
var controlDir;
|
||||
var control;
|
||||
|
||||
beforeEach(() => {
|
||||
controlDir = new FormControlDirective();
|
||||
controlDir = new NgFormControl();
|
||||
controlDir.valueAccessor = new DummyControlValueAccessor();
|
||||
|
||||
control = new Control(null);
|
||||
|
@ -24,10 +24,10 @@ import {NgIf} from 'angular2/directives';
|
||||
import {
|
||||
Control,
|
||||
ControlGroup,
|
||||
TemplateDrivenFormDirective,
|
||||
NgForm,
|
||||
formDirectives,
|
||||
Validators,
|
||||
ControlDirective,
|
||||
NgControl,
|
||||
ControlValueAccessor
|
||||
} from 'angular2/forms';
|
||||
|
||||
@ -481,7 +481,7 @@ export function main() {
|
||||
.then((view) => {
|
||||
view.detectChanges();
|
||||
var form =
|
||||
view.rawView.elementInjectors[0].get(TemplateDrivenFormDirective);
|
||||
view.rawView.elementInjectors[0].get(NgForm);
|
||||
expect(form.controls['user']).not.toBeDefined();
|
||||
|
||||
tick();
|
||||
@ -536,7 +536,7 @@ export function main() {
|
||||
.then((view) => {
|
||||
view.detectChanges();
|
||||
var form = view.rawView.elementInjectors[0].get(
|
||||
TemplateDrivenFormDirective);
|
||||
NgForm);
|
||||
|
||||
tick();
|
||||
|
||||
@ -566,7 +566,7 @@ export function main() {
|
||||
.then((view) => {
|
||||
view.detectChanges();
|
||||
var form =
|
||||
view.rawView.elementInjectors[0].get(TemplateDrivenFormDirective);
|
||||
view.rawView.elementInjectors[0].get(NgForm);
|
||||
flushMicrotasks();
|
||||
|
||||
expect(form.controls['user']).toBeDefined();
|
||||
@ -739,7 +739,7 @@ class WrappedValue implements ControlValueAccessor {
|
||||
value;
|
||||
onChange: Function;
|
||||
|
||||
constructor(cd: ControlDirective) { cd.valueAccessor = this; }
|
||||
constructor(cd: NgControl) { cd.valueAccessor = this; }
|
||||
|
||||
writeValue(value) { this.value = `!${value}!`; }
|
||||
|
||||
|
@ -1,11 +1,5 @@
|
||||
import {bootstrap, onChange, NgIf, Component, Directive, View, Ancestor} from 'angular2/angular2';
|
||||
import {
|
||||
formDirectives,
|
||||
ControlDirective,
|
||||
Validators,
|
||||
FormModelDirective,
|
||||
FormBuilder
|
||||
} from 'angular2/forms';
|
||||
import {formDirectives, NgControl, Validators, NgFormModel, FormBuilder} from 'angular2/forms';
|
||||
|
||||
import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
|
||||
|
||||
@ -50,7 +44,7 @@ class ShowError {
|
||||
controlPath: string;
|
||||
errorTypes: List<string>;
|
||||
|
||||
constructor(@Ancestor() formDir: FormModelDirective) { this.formDir = formDir; }
|
||||
constructor(@Ancestor() formDir: NgFormModel) { this.formDir = formDir; }
|
||||
|
||||
get errorMessage() {
|
||||
var c = this.formDir.form.find(this.controlPath);
|
||||
|
@ -1,10 +1,5 @@
|
||||
import {bootstrap, onChange, NgIf, Component, Directive, View, Ancestor} from 'angular2/angular2';
|
||||
import {
|
||||
formDirectives,
|
||||
ControlDirective,
|
||||
Validators,
|
||||
TemplateDrivenFormDirective
|
||||
} from 'angular2/forms';
|
||||
import {formDirectives, NgControl, Validators, NgForm} from 'angular2/forms';
|
||||
|
||||
import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
|
||||
|
||||
@ -30,7 +25,7 @@ class CheckoutModel {
|
||||
*/
|
||||
@Directive({selector: '[credit-card]'})
|
||||
class CreditCardValidator {
|
||||
constructor(c: ControlDirective) {
|
||||
constructor(c: NgControl) {
|
||||
c.validator = Validators.compose([c.validator, CreditCardValidator.validate]);
|
||||
}
|
||||
|
||||
@ -70,7 +65,7 @@ class ShowError {
|
||||
controlPath: string;
|
||||
errorTypes: List<string>;
|
||||
|
||||
constructor(@Ancestor() formDir: TemplateDrivenFormDirective) { this.formDir = formDir; }
|
||||
constructor(@Ancestor() formDir: NgForm) { this.formDir = formDir; }
|
||||
|
||||
get errorMessage() {
|
||||
var c = this.formDir.form.find(this.controlPath);
|
||||
|
Loading…
x
Reference in New Issue
Block a user