feat(forms): changed all form directives to have basic control attributes
This commit is contained in:
parent
4656c6f5cf
commit
3f7ebde037
|
@ -71,6 +71,7 @@ export * from './directives';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
AbstractControl,
|
AbstractControl,
|
||||||
|
AbstractControlDirective,
|
||||||
Control,
|
Control,
|
||||||
ControlGroup,
|
ControlGroup,
|
||||||
ControlArray,
|
ControlArray,
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
export {AbstractControl, Control, ControlGroup, ControlArray} from './src/forms/model';
|
export {AbstractControl, Control, ControlGroup, ControlArray} from './src/forms/model';
|
||||||
|
|
||||||
|
export {AbstractControlDirective} from './src/forms/directives/abstract_control_directive';
|
||||||
export {NgControlName} from './src/forms/directives/ng_control_name';
|
export {NgControlName} from './src/forms/directives/ng_control_name';
|
||||||
export {NgFormControl} from './src/forms/directives/ng_form_control';
|
export {NgFormControl} from './src/forms/directives/ng_form_control';
|
||||||
export {NgModel} from './src/forms/directives/ng_model';
|
export {NgModel} from './src/forms/directives/ng_model';
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
import {AbstractControl} from '../model';
|
||||||
|
|
||||||
|
export class AbstractControlDirective {
|
||||||
|
get control(): AbstractControl { return null; }
|
||||||
|
|
||||||
|
get value(): any { return this.control.value; }
|
||||||
|
|
||||||
|
get valid(): boolean { return this.control.valid; }
|
||||||
|
|
||||||
|
get errors(): StringMap<string, any> { return this.control.errors; }
|
||||||
|
|
||||||
|
get pristine(): boolean { return this.control.pristine; }
|
||||||
|
|
||||||
|
get dirty(): boolean { return this.control.dirty; }
|
||||||
|
|
||||||
|
get touched(): boolean { return this.control.touched; }
|
||||||
|
|
||||||
|
get untouched(): boolean { return this.control.untouched; }
|
||||||
|
}
|
|
@ -1,4 +1,5 @@
|
||||||
import {Form} from './form_interface';
|
import {Form} from './form_interface';
|
||||||
|
import {AbstractControlDirective} from './abstract_control_directive';
|
||||||
import {List} from 'angular2/src/facade/collection';
|
import {List} from 'angular2/src/facade/collection';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -6,7 +7,7 @@ import {List} from 'angular2/src/facade/collection';
|
||||||
*
|
*
|
||||||
* Only used by the forms module.
|
* Only used by the forms module.
|
||||||
*/
|
*/
|
||||||
export class ControlContainer {
|
export class ControlContainer extends AbstractControlDirective {
|
||||||
name: string;
|
name: string;
|
||||||
get formDirective(): Form { return null; }
|
get formDirective(): Form { return null; }
|
||||||
get path(): List<string> { return null; }
|
get path(): List<string> { return null; }
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import {NgControl} from './ng_control';
|
import {NgControl} from './ng_control';
|
||||||
import {NgControlGroup} from './ng_control_group';
|
import {NgControlGroup} from './ng_control_group';
|
||||||
import {Control} from '../model';
|
import {Control, ControlGroup} from '../model';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An interface that {@link NgFormModel} and {@link NgForm} implement.
|
* An interface that {@link NgFormModel} and {@link NgForm} implement.
|
||||||
|
@ -13,5 +13,6 @@ export interface Form {
|
||||||
getControl(dir: NgControl): Control;
|
getControl(dir: NgControl): Control;
|
||||||
addControlGroup(dir: NgControlGroup): void;
|
addControlGroup(dir: NgControlGroup): void;
|
||||||
removeControlGroup(dir: NgControlGroup): void;
|
removeControlGroup(dir: NgControlGroup): void;
|
||||||
|
getControlGroup(dir: NgControlGroup): ControlGroup;
|
||||||
updateModel(dir: NgControl, value: any): void;
|
updateModel(dir: NgControl, value: any): void;
|
||||||
}
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import {ControlValueAccessor} from './control_value_accessor';
|
import {ControlValueAccessor} from './control_value_accessor';
|
||||||
import {Control} from '../model';
|
import {AbstractControlDirective} from './abstract_control_directive';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An abstract class that all control directive extend.
|
* An abstract class that all control directive extend.
|
||||||
|
@ -8,13 +8,12 @@ import {Control} from '../model';
|
||||||
*
|
*
|
||||||
* @exportedAs angular2/forms
|
* @exportedAs angular2/forms
|
||||||
*/
|
*/
|
||||||
export class NgControl {
|
export class NgControl extends AbstractControlDirective {
|
||||||
name: string = null;
|
name: string = null;
|
||||||
valueAccessor: ControlValueAccessor = null;
|
valueAccessor: ControlValueAccessor = null;
|
||||||
|
|
||||||
get validator(): Function { return null; }
|
get validator(): Function { return null; }
|
||||||
get path(): List<string> { return null; }
|
get path(): List<string> { return null; }
|
||||||
get control(): Control { return null; }
|
|
||||||
|
|
||||||
viewToModelUpdate(newValue: any): void {}
|
viewToModelUpdate(newValue: any): void {}
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,8 @@ import {CONST_EXPR} from 'angular2/src/facade/lang';
|
||||||
|
|
||||||
import {ControlContainer} from './control_container';
|
import {ControlContainer} from './control_container';
|
||||||
import {controlPath} from './shared';
|
import {controlPath} from './shared';
|
||||||
|
import {ControlGroup} from '../model';
|
||||||
|
import {Form} from './form_interface';
|
||||||
|
|
||||||
const controlGroupBinding =
|
const controlGroupBinding =
|
||||||
CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgControlGroup)}));
|
CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgControlGroup)}));
|
||||||
|
@ -66,7 +68,9 @@ export class NgControlGroup extends ControlContainer {
|
||||||
|
|
||||||
onDestroy() { this.formDirective.removeControlGroup(this); }
|
onDestroy() { this.formDirective.removeControlGroup(this); }
|
||||||
|
|
||||||
|
get control(): ControlGroup { return this.formDirective.getControlGroup(this); }
|
||||||
|
|
||||||
get path(): List<string> { return controlPath(this.name, this._parent); }
|
get path(): List<string> { return controlPath(this.name, this._parent); }
|
||||||
|
|
||||||
get formDirective(): any { return this._parent.formDirective; }
|
get formDirective(): Form { return this._parent.formDirective; }
|
||||||
}
|
}
|
|
@ -67,14 +67,12 @@ export class NgForm extends ControlContainer implements Form {
|
||||||
|
|
||||||
get formDirective(): Form { return this; }
|
get formDirective(): Form { return this; }
|
||||||
|
|
||||||
|
get control(): ControlGroup { return this.form; }
|
||||||
|
|
||||||
get path(): List<string> { return []; }
|
get path(): List<string> { return []; }
|
||||||
|
|
||||||
get controls(): StringMap<string, AbstractControl> { return this.form.controls; }
|
get controls(): StringMap<string, AbstractControl> { return this.form.controls; }
|
||||||
|
|
||||||
get value(): any { return this.form.value; }
|
|
||||||
|
|
||||||
get errors(): any { return this.form.errors; }
|
|
||||||
|
|
||||||
addControl(dir: NgControl): void {
|
addControl(dir: NgControl): void {
|
||||||
this._later(_ => {
|
this._later(_ => {
|
||||||
var container = this._findContainer(dir.path);
|
var container = this._findContainer(dir.path);
|
||||||
|
@ -116,6 +114,10 @@ export class NgForm extends ControlContainer implements Form {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getControlGroup(dir: NgControlGroup): ControlGroup {
|
||||||
|
return <ControlGroup>this.form.find(dir.path);
|
||||||
|
}
|
||||||
|
|
||||||
updateModel(dir: NgControl, value: any): void {
|
updateModel(dir: NgControl, value: any): void {
|
||||||
this._later(_ => {
|
this._later(_ => {
|
||||||
var c = <Control>this.form.find(dir.path);
|
var c = <Control>this.form.find(dir.path);
|
||||||
|
|
|
@ -102,6 +102,8 @@ export class NgFormModel extends ControlContainer implements Form {
|
||||||
|
|
||||||
get formDirective(): Form { return this; }
|
get formDirective(): Form { return this; }
|
||||||
|
|
||||||
|
get control(): ControlGroup { return this.form; }
|
||||||
|
|
||||||
get path(): List<string> { return []; }
|
get path(): List<string> { return []; }
|
||||||
|
|
||||||
addControl(dir: NgControl): void {
|
addControl(dir: NgControl): void {
|
||||||
|
@ -119,6 +121,10 @@ export class NgFormModel extends ControlContainer implements Form {
|
||||||
|
|
||||||
removeControlGroup(dir: NgControlGroup) {}
|
removeControlGroup(dir: NgControlGroup) {}
|
||||||
|
|
||||||
|
getControlGroup(dir: NgControlGroup): ControlGroup {
|
||||||
|
return <ControlGroup>this.form.find(dir.path);
|
||||||
|
}
|
||||||
|
|
||||||
updateModel(dir: NgControl, value: any): void {
|
updateModel(dir: NgControl, value: any): void {
|
||||||
var c = <Control>this.form.find(dir.path);
|
var c = <Control>this.form.find(dir.path);
|
||||||
c.updateValue(value);
|
c.updateValue(value);
|
||||||
|
|
|
@ -56,6 +56,17 @@ export function main() {
|
||||||
loginControlDir.valueAccessor = new DummyControlValueAccessor();
|
loginControlDir.valueAccessor = new DummyControlValueAccessor();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should reexport control properties", () => {
|
||||||
|
expect(form.control).toBe(formModel);
|
||||||
|
expect(form.value).toBe(formModel.value);
|
||||||
|
expect(form.valid).toBe(formModel.valid);
|
||||||
|
expect(form.errors).toBe(formModel.errors);
|
||||||
|
expect(form.pristine).toBe(formModel.pristine);
|
||||||
|
expect(form.dirty).toBe(formModel.dirty);
|
||||||
|
expect(form.touched).toBe(formModel.touched);
|
||||||
|
expect(form.untouched).toBe(formModel.untouched);
|
||||||
|
});
|
||||||
|
|
||||||
describe("addControl", () => {
|
describe("addControl", () => {
|
||||||
it("should throw when no control found", () => {
|
it("should throw when no control found", () => {
|
||||||
var dir = new NgControlName(form, null);
|
var dir = new NgControlName(form, null);
|
||||||
|
@ -137,6 +148,17 @@ export function main() {
|
||||||
loginControlDir.valueAccessor = new DummyControlValueAccessor();
|
loginControlDir.valueAccessor = new DummyControlValueAccessor();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should reexport control properties", () => {
|
||||||
|
expect(form.control).toBe(formModel);
|
||||||
|
expect(form.value).toBe(formModel.value);
|
||||||
|
expect(form.valid).toBe(formModel.valid);
|
||||||
|
expect(form.errors).toBe(formModel.errors);
|
||||||
|
expect(form.pristine).toBe(formModel.pristine);
|
||||||
|
expect(form.dirty).toBe(formModel.dirty);
|
||||||
|
expect(form.touched).toBe(formModel.touched);
|
||||||
|
expect(form.untouched).toBe(formModel.untouched);
|
||||||
|
});
|
||||||
|
|
||||||
describe("addControl & addControlGroup", () => {
|
describe("addControl & addControlGroup", () => {
|
||||||
it("should create a control with the given name", fakeAsync(() => {
|
it("should create a control with the given name", fakeAsync(() => {
|
||||||
form.addControlGroup(personControlGroupDir);
|
form.addControlGroup(personControlGroupDir);
|
||||||
|
@ -168,6 +190,31 @@ export function main() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("NgControlGroup", () => {
|
||||||
|
var formModel;
|
||||||
|
var controlGroupDir;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
formModel = new ControlGroup({"login": new Control(null)});
|
||||||
|
|
||||||
|
var parent = new NgFormModel();
|
||||||
|
parent.form = new ControlGroup({"group": formModel});
|
||||||
|
controlGroupDir = new NgControlGroup(parent);
|
||||||
|
controlGroupDir.name = "group";
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should reexport control properties", () => {
|
||||||
|
expect(controlGroupDir.control).toBe(formModel);
|
||||||
|
expect(controlGroupDir.value).toBe(formModel.value);
|
||||||
|
expect(controlGroupDir.valid).toBe(formModel.valid);
|
||||||
|
expect(controlGroupDir.errors).toBe(formModel.errors);
|
||||||
|
expect(controlGroupDir.pristine).toBe(formModel.pristine);
|
||||||
|
expect(controlGroupDir.dirty).toBe(formModel.dirty);
|
||||||
|
expect(controlGroupDir.touched).toBe(formModel.touched);
|
||||||
|
expect(controlGroupDir.untouched).toBe(formModel.untouched);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe("NgFormControl", () => {
|
describe("NgFormControl", () => {
|
||||||
var controlDir;
|
var controlDir;
|
||||||
var control;
|
var control;
|
||||||
|
@ -180,6 +227,17 @@ export function main() {
|
||||||
controlDir.form = control;
|
controlDir.form = control;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should reexport control properties", () => {
|
||||||
|
expect(controlDir.control).toBe(control);
|
||||||
|
expect(controlDir.value).toBe(control.value);
|
||||||
|
expect(controlDir.valid).toBe(control.valid);
|
||||||
|
expect(controlDir.errors).toBe(control.errors);
|
||||||
|
expect(controlDir.pristine).toBe(control.pristine);
|
||||||
|
expect(controlDir.dirty).toBe(control.dirty);
|
||||||
|
expect(controlDir.touched).toBe(control.touched);
|
||||||
|
expect(controlDir.untouched).toBe(control.untouched);
|
||||||
|
});
|
||||||
|
|
||||||
it("should set up validator", () => {
|
it("should set up validator", () => {
|
||||||
controlDir.ngValidators.reset([new NgRequiredValidator()]);
|
controlDir.ngValidators.reset([new NgRequiredValidator()]);
|
||||||
|
|
||||||
|
@ -200,6 +258,18 @@ export function main() {
|
||||||
ngModel.valueAccessor = new DummyControlValueAccessor();
|
ngModel.valueAccessor = new DummyControlValueAccessor();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("should reexport control properties", () => {
|
||||||
|
var control = ngModel.control;
|
||||||
|
expect(ngModel.control).toBe(control);
|
||||||
|
expect(ngModel.value).toBe(control.value);
|
||||||
|
expect(ngModel.valid).toBe(control.valid);
|
||||||
|
expect(ngModel.errors).toBe(control.errors);
|
||||||
|
expect(ngModel.pristine).toBe(control.pristine);
|
||||||
|
expect(ngModel.dirty).toBe(control.dirty);
|
||||||
|
expect(ngModel.touched).toBe(control.touched);
|
||||||
|
expect(ngModel.untouched).toBe(control.untouched);
|
||||||
|
});
|
||||||
|
|
||||||
it("should set up validator", () => {
|
it("should set up validator", () => {
|
||||||
ngModel.ngValidators.reset([new NgRequiredValidator()]);
|
ngModel.ngValidators.reset([new NgRequiredValidator()]);
|
||||||
|
|
||||||
|
@ -211,5 +281,30 @@ export function main() {
|
||||||
expect(ngModel.control.valid).toBe(false);
|
expect(ngModel.control.valid).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("NgControlName", () => {
|
||||||
|
var formModel;
|
||||||
|
var controlNameDir;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
formModel = new Control("name");
|
||||||
|
|
||||||
|
var parent = new NgFormModel();
|
||||||
|
parent.form = new ControlGroup({"name": formModel});
|
||||||
|
controlNameDir = new NgControlName(parent, new QueryList<any>());
|
||||||
|
controlNameDir.name = "name";
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should reexport control properties", () => {
|
||||||
|
expect(controlNameDir.control).toBe(formModel);
|
||||||
|
expect(controlNameDir.value).toBe(formModel.value);
|
||||||
|
expect(controlNameDir.valid).toBe(formModel.valid);
|
||||||
|
expect(controlNameDir.errors).toBe(formModel.errors);
|
||||||
|
expect(controlNameDir.pristine).toBe(formModel.pristine);
|
||||||
|
expect(controlNameDir.dirty).toBe(formModel.dirty);
|
||||||
|
expect(controlNameDir.touched).toBe(formModel.touched);
|
||||||
|
expect(controlNameDir.untouched).toBe(formModel.untouched);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue