feat(forms): changed all form directives to have basic control attributes

Author: vsavkin

modules/angular2/angular2.ts

@@ -71,6 +71,7 @@ export * from './directives';
 
 export {
   AbstractControl,
+  AbstractControlDirective,
   Control,
   ControlGroup,
   ControlArray,

modules/angular2/forms.ts

@@ -15,6 +15,7 @@
 
 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 {NgFormControl} from './src/forms/directives/ng_form_control';
 export {NgModel} from './src/forms/directives/ng_model';

modules/angular2/src/forms/directives/abstract_control_directive.ts

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

modules/angular2/src/forms/directives/control_container.ts

@@ -1,12 +1,13 @@
 import {Form} from './form_interface';
+import {AbstractControlDirective} from './abstract_control_directive';
 import {List} from 'angular2/src/facade/collection';
 
 /**
  * A directive that contains a group of [NgControl].
  *
  * Only used by the forms module.
  */
-export class ControlContainer {
+export class ControlContainer extends AbstractControlDirective {
   name: string;
   get formDirective(): Form { return null; }
   get path(): List<string> { return null; }

modules/angular2/src/forms/directives/form_interface.ts

@@ -1,6 +1,6 @@
 import {NgControl} from './ng_control';
 import {NgControlGroup} from './ng_control_group';
-import {Control} from '../model';
+import {Control, ControlGroup} from '../model';
 
 /**
  * An interface that {@link NgFormModel} and {@link NgForm} implement.
@@ -13,5 +13,6 @@ export interface Form {
   getControl(dir: NgControl): Control;
   addControlGroup(dir: NgControlGroup): void;
   removeControlGroup(dir: NgControlGroup): void;
+  getControlGroup(dir: NgControlGroup): ControlGroup;
   updateModel(dir: NgControl, value: any): void;
 }

modules/angular2/src/forms/directives/ng_control.ts

@@ -1,5 +1,5 @@
 import {ControlValueAccessor} from './control_value_accessor';
-import {Control} from '../model';
+import {AbstractControlDirective} from './abstract_control_directive';
 
 /**
  * An abstract class that all control directive extend.
@@ -8,13 +8,12 @@ import {Control} from '../model';
  *
  * @exportedAs angular2/forms
  */
-export class NgControl {
+export class NgControl extends AbstractControlDirective {
   name: string = null;
   valueAccessor: ControlValueAccessor = null;
 
   get validator(): Function { return null; }
   get path(): List<string> { return null; }
-  get control(): Control { return null; }
 
   viewToModelUpdate(newValue: any): void {}
 }

modules/angular2/src/forms/directives/ng_control_group.ts

@@ -5,6 +5,8 @@ import {CONST_EXPR} from 'angular2/src/facade/lang';
 
 import {ControlContainer} from './control_container';
 import {controlPath} from './shared';
+import {ControlGroup} from '../model';
+import {Form} from './form_interface';
 
 const controlGroupBinding =
     CONST_EXPR(new Binding(ControlContainer, {toAlias: forwardRef(() => NgControlGroup)}));
@@ -66,7 +68,9 @@ export class NgControlGroup extends ControlContainer {
 
   onDestroy() { this.formDirective.removeControlGroup(this); }
 
+  get control(): ControlGroup { return this.formDirective.getControlGroup(this); }
+
   get path(): List<string> { return controlPath(this.name, this._parent); }
 
-  get formDirective(): any { return this._parent.formDirective; }
+  get formDirective(): Form { return this._parent.formDirective; }
 }

modules/angular2/src/forms/directives/ng_form.ts

@@ -67,14 +67,12 @@ export class NgForm extends ControlContainer implements Form {
 
   get formDirective(): Form { return this; }
 
+  get control(): ControlGroup { return this.form; }
+
   get path(): List<string> { return []; }
 
   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 {
     this._later(_ => {
       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 {
     this._later(_ => {
       var c = <Control>this.form.find(dir.path);

modules/angular2/src/forms/directives/ng_form_model.ts

@@ -102,6 +102,8 @@ export class NgFormModel extends ControlContainer implements Form {
 
   get formDirective(): Form { return this; }
 
+  get control(): ControlGroup { return this.form; }
+
   get path(): List<string> { return []; }
 
   addControl(dir: NgControl): void {
@@ -119,6 +121,10 @@ export class NgFormModel extends ControlContainer implements Form {
 
   removeControlGroup(dir: NgControlGroup) {}
 
+  getControlGroup(dir: NgControlGroup): ControlGroup {
+    return <ControlGroup>this.form.find(dir.path);
+  }
+
   updateModel(dir: NgControl, value: any): void {
     var c  = <Control>this.form.find(dir.path);
     c.updateValue(value);

modules/angular2/test/forms/directives_spec.ts

@@ -56,6 +56,17 @@ export function main() {
         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", () => {
         it("should throw when no control found", () => {
           var dir = new NgControlName(form, null);
@@ -137,6 +148,17 @@ export function main() {
         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", () => {
         it("should create a control with the given name", fakeAsync(() => {
              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", () => {
       var controlDir;
       var control;
@@ -180,6 +227,17 @@ export function main() {
         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", () => {
         controlDir.ngValidators.reset([new NgRequiredValidator()]);
 
@@ -200,6 +258,18 @@ export function main() {
         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", () => {
         ngModel.ngValidators.reset([new NgRequiredValidator()]);
 
@@ -211,5 +281,30 @@ export function main() {
         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);
+      });
+    });
   });
 }