cargdev/angular
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(forms): made directive names consistent

Browse Source
This commit is contained in:
vsavkin
2015-06-10 13:51:44 -07:00
parent a858f6ac42
commit 4fe919335c
24 changed files with 150 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
modules/angular2/src/forms/directives.ts
View File

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

4
modules/angular2/src/forms/directives/checkbox_value_accessor.ts
View File

@ -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
View 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; }
}

13
modules/angular2/src/forms/directives/control_container_directive.ts
View File

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

4
modules/angular2/src/forms/directives/default_value_accessor.ts
View File

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

12
modules/angular2/src/forms/directives/form_directive.ts
View File

@ -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
View 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;
}

2
modules/angular2/src/forms/directives/control_directive.ts → modules/angular2/src/forms/directives/ng_control.ts
View File

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

14
modules/angular2/src/forms/directives/control_group_directive.ts → modules/angular2/src/forms/directives/ng_control_group.ts
View File

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

14
modules/angular2/src/forms/directives/control_name_directive.ts → modules/angular2/src/forms/directives/ng_control_name.ts
View File

@ -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();

29
modules/angular2/src/forms/directives/template_driven_form_directive.ts → modules/angular2/src/forms/directives/ng_form.ts
View File

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

8
modules/angular2/src/forms/directives/form_control_directive.ts → modules/angular2/src/forms/directives/ng_form_control.ts
View File

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

32
modules/angular2/src/forms/directives/form_model_directive.ts → modules/angular2/src/forms/directives/ng_form_model.ts
View File

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

6
modules/angular2/src/forms/directives/ng_model_directive.ts → modules/angular2/src/forms/directives/ng_model.ts
View File

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

4
modules/angular2/src/forms/directives/select_control_value_accessor.ts
View File

@ -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 = '';

10
modules/angular2/src/forms/directives/shared.ts
View File

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

10
modules/angular2/src/forms/validator_directives.ts
View File

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