feat(forms): added support for status classes

vsavkin · vsavkin · commit 3baf815d76db · 2015-06-03T14:43:46.000-07:00
diff --git a/modules/angular2/src/core/compiler/proto_view_factory.ts b/modules/angular2/src/core/compiler/proto_view_factory.ts
@@ -105,7 +105,10 @@ class BindingRecordsCreator {
       if (directiveRecord.callOnCheck) {
         ListWrapper.push(bindings, BindingRecord.createDirectiveOnCheck(directiveRecord));
       }
+    }
 
+    for (var i = 0; i < directiveBinders.length; i++) {
+      var directiveBinder = directiveBinders[i];
       // host properties
       MapWrapper.forEach(directiveBinder.hostPropertyBindings, (astWithSource, propertyName) => {
         var dirIndex = new DirectiveIndex(boundElementIndex, i);
diff --git a/modules/angular2/src/forms/directives/checkbox_value_accessor.ts b/modules/angular2/src/forms/directives/checkbox_value_accessor.ts
@@ -1,5 +1,4 @@
-import {ElementRef, Directive} from 'angular2/angular2';
-import {Renderer} from 'angular2/src/render/api';
+import {Directive} from 'angular2/angular2';
 import {ControlDirective} from './control_directive';
 import {ControlValueAccessor} from './control_value_accessor';
 
@@ -18,23 +17,28 @@ import {ControlValueAccessor} from './control_value_accessor';
   selector:
       'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
   hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
-  hostProperties: {'checked': 'checked'}
+  hostProperties: {
+    'checked': 'checked',
+    'cd.control?.untouched == true': 'class.ng-untouched',
+    'cd.control?.touched == true': 'class.ng-touched',
+    'cd.control?.pristine == true': 'class.ng-pristine',
+    'cd.control?.dirty == true': 'class.ng-dirty',
+    'cd.control?.valid == true': 'class.ng-valid',
+    'cd.control?.valid == false': 'class.ng-invalid'
+  }
 })
 export class CheckboxControlValueAccessor implements ControlValueAccessor {
   checked: boolean;
   onChange: Function;
   onTouched: Function;
 
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(private cd: ControlDirective) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'checked', value)
-  }
+  writeValue(value) { this.checked = value; }
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }
diff --git a/modules/angular2/src/forms/directives/control_directive.ts b/modules/angular2/src/forms/directives/control_directive.ts
@@ -1,5 +1,6 @@
 import {ControlValueAccessor} from './control_value_accessor';
 import {Validators} from '../validators';
+import {Control} from '../model';
 
 /**
  * A directive that bind a [ng-control] object to a DOM element.
@@ -12,6 +13,7 @@ export class ControlDirective {
   validator: Function;
 
   get path(): List<string> { return null; }
+  get control(): Control { return null; }
   constructor() { this.validator = Validators.nullValidator; }
 
   viewToModelUpdate(newValue: any): void {}
diff --git a/modules/angular2/src/forms/directives/control_name_directive.ts b/modules/angular2/src/forms/directives/control_name_directive.ts
@@ -7,6 +7,7 @@ import {FORWARD_REF, Binding, Inject} from 'angular2/di';
 import {ControlContainerDirective} from './control_container_directive';
 import {ControlDirective} from './control_directive';
 import {controlPath} from './shared';
+import {Control} from '../model';
 
 const controlNameBinding =
     CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => ControlNameDirective)}));
@@ -84,11 +85,14 @@ export class ControlNameDirective extends ControlDirective {
     }
   }
 
+
   onDestroy() { this.formDirective.removeControl(this); }
 
   viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
 
   get path(): List<string> { return controlPath(this.name, this._parent); }
 
   get formDirective(): any { return this._parent.formDirective; }
+
+  get control(): Control { return this.formDirective.getControl(this); }
 }
diff --git a/modules/angular2/src/forms/directives/default_value_accessor.ts b/modules/angular2/src/forms/directives/default_value_accessor.ts
@@ -1,5 +1,4 @@
-import {ElementRef, Directive} from 'angular2/angular2';
-import {Renderer} from 'angular2/src/render/api';
+import {Directive} from 'angular2/angular2';
 import {ControlDirective} from './control_directive';
 import {ControlValueAccessor} from './control_value_accessor';
 
@@ -24,24 +23,30 @@ import {ControlValueAccessor} from './control_value_accessor';
     'input': 'onChange($event.target.value)',
     'blur': 'onTouched()'
   },
-  hostProperties: {'value': 'value'}
+  hostProperties: {
+    'value': 'value',
+    'cd.control?.untouched == true': 'class.ng-untouched',
+    'cd.control?.touched == true': 'class.ng-touched',
+    'cd.control?.pristine == true': 'class.ng-pristine',
+    'cd.control?.dirty == true': 'class.ng-dirty',
+    'cd.control?.valid == true': 'class.ng-valid',
+    'cd.control?.valid == false': 'class.ng-invalid'
+  }
 })
 export class DefaultValueAccessor implements ControlValueAccessor {
   value = null;
   onChange: Function;
   onTouched: Function;
 
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(private cd: ControlDirective) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'value', value)
-  }
+  writeValue(value) { this.value = value; }
 
   registerOnChange(fn): void { this.onChange = fn; }
+
   registerOnTouched(fn): void { this.onTouched = fn; }
 }
diff --git a/modules/angular2/src/forms/directives/form_control_directive.ts b/modules/angular2/src/forms/directives/form_control_directive.ts
@@ -47,12 +47,12 @@ const formControlBinding =
 @Directive({
   selector: '[ng-form-control]',
   hostInjector: [formControlBinding],
-  properties: ['control: ng-form-control', 'model: ng-model'],
+  properties: ['form: ng-form-control', 'model: ng-model'],
   events: ['ngModel'],
   lifecycle: [onChange]
 })
 export class FormControlDirective extends ControlDirective {
-  control: Control;
+  form: Control;
   ngModel: EventEmitter;
   _added: boolean;
   model: any;
@@ -65,14 +65,18 @@ export class FormControlDirective extends ControlDirective {
 
   onChange(c) {
     if (!this._added) {
-      setUpControl(this.control, this);
-      this.control.updateValidity();
+      setUpControl(this.form, this);
+      this.form.updateValidity();
       this._added = true;
     }
     if (StringMapWrapper.contains(c, "model")) {
-      this.control.updateValue(this.model);
+      this.form.updateValue(this.model);
     }
   }
 
+  get control(): Control { return this.form; }
+
+  get path(): List<string> { return []; }
+
   viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
 }
diff --git a/modules/angular2/src/forms/directives/form_directive.ts b/modules/angular2/src/forms/directives/form_directive.ts
@@ -1,9 +1,11 @@
 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;
diff --git a/modules/angular2/src/forms/directives/form_model_directive.ts b/modules/angular2/src/forms/directives/form_model_directive.ts
@@ -81,6 +81,8 @@ export class FormModelDirective extends ControlContainerDirective implements For
     ListWrapper.push(this.directives, dir);
   }
 
+  getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
+
   removeControl(dir: ControlDirective): void { ListWrapper.remove(this.directives, dir); }
 
   addControlGroup(dir: ControlGroupDirective) {}
diff --git a/modules/angular2/src/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/forms/directives/select_control_value_accessor.ts
@@ -1,5 +1,4 @@
-import {ElementRef, Directive} from 'angular2/angular2';
-import {Renderer} from 'angular2/src/render/api';
+import {Directive} from 'angular2/angular2';
 import {ControlDirective} from './control_directive';
 import {ControlValueAccessor} from './control_value_accessor';
 
@@ -23,24 +22,29 @@ import {ControlValueAccessor} from './control_value_accessor';
     'input': 'onChange($event.target.value)',
     'blur': 'onTouched()'
   },
-  hostProperties: {'value': 'value'}
+  hostProperties: {
+    'value': 'value',
+    'cd.control?.untouched == true': 'class.ng-untouched',
+    'cd.control?.touched == true': 'class.ng-touched',
+    'cd.control?.pristine == true': 'class.ng-pristine',
+    'cd.control?.dirty == true': 'class.ng-dirty',
+    'cd.control?.valid == true': 'class.ng-valid',
+    'cd.control?.valid == false': 'class.ng-invalid'
+  }
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
   value = null;
   onChange: Function;
   onTouched: Function;
 
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+  constructor(private cd: ControlDirective) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     this.value = '';
     cd.valueAccessor = this;
   }
 
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'value', value)
-  }
+  writeValue(value) { this.value = value; }
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }
diff --git a/modules/angular2/src/forms/directives/template_driven_form_directive.ts b/modules/angular2/src/forms/directives/template_driven_form_directive.ts
@@ -43,6 +43,8 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
     });
   }
 
+  getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
+
   removeControl(dir: ControlDirective): void {
     this._later(_ => {
       var c = this._findContainer(dir.path);
diff --git a/modules/angular2/test/forms/directives_spec.ts b/modules/angular2/test/forms/directives_spec.ts
@@ -172,7 +172,7 @@ export function main() {
         controlDir.valueAccessor = new DummyControlValueAccessor();
 
         control = new Control(null);
-        controlDir.control = control;
+        controlDir.form = control;
       });
 
       it("should set up validator", () => {
diff --git a/modules/angular2/test/forms/integration_spec.ts b/modules/angular2/test/forms/integration_spec.ts
@@ -17,6 +17,7 @@ import {
   xit
 } from 'angular2/test_lib';
 
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {TestBed} from 'angular2/src/test_lib/test_bed';
 import {NgIf} from 'angular2/directives';
 
@@ -561,6 +562,7 @@ export function main() {
                       .then((view) => {
                         view.detectChanges();
                         tick();
+                        view.detectChanges();
 
                         var input = view.querySelector("input");
                         expect(input.value).toEqual("oldValue");
@@ -599,6 +601,105 @@ export function main() {
                   flushMicrotasks();
                 })));
     });
+
+
+    describe("setting status classes", () => {
+      it("should work with single fields",
+         inject([TestBed], fakeAsync(tb => {
+                  var form = new Control("", Validators.required);
+                  var ctx = MyComp.create({form: form});
+
+                  var t = `<div><input type="text" [ng-form-control]="form"></div>`;
+
+                  tb.createView(MyComp, {context: ctx, html: t})
+                      .then((view) => {
+                        view.detectChanges();
+
+                        var input = view.querySelector("input");
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
+
+                        dispatchEvent(input, "blur");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
+
+                        input.value = "updatedValue";
+                        dispatchEvent(input, "change");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
+                        tick();
+                      });
+                  flushMicrotasks();
+                })));
+
+      it("should work with complex model-driven forms",
+         inject([TestBed], fakeAsync(tb => {
+                  var form = new ControlGroup({"name": new Control("", Validators.required)});
+                  var ctx = MyComp.create({form: form});
+
+                  var t =
+                      `<form [ng-form-model]="form"><input type="text" ng-control="name"></form>`;
+
+                  tb.createView(MyComp, {context: ctx, html: t})
+                      .then((view) => {
+                        view.detectChanges();
+
+                        var input = view.querySelector("input");
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
+
+                        dispatchEvent(input, "blur");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
+
+                        input.value = "updatedValue";
+                        dispatchEvent(input, "change");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
+                        tick();
+                      });
+                  flushMicrotasks();
+                })));
+
+      it("should work with ng-model",
+         inject([TestBed], fakeAsync(tb => {
+                  var ctx = MyComp.create({name: ""});
+
+                  var t = `<div><input [(ng-model)]="name" required></div>`;
+
+                  tb.createView(MyComp, {context: ctx, html: t})
+                      .then((view) => {
+                        view.detectChanges();
+
+                        var input = view.querySelector("input");
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-untouched", "ng-pristine", "ng-invalid"]);
+
+                        dispatchEvent(input, "blur");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-pristine", "ng-invalid", "ng-touched"]);
+
+                        input.value = "updatedValue";
+                        dispatchEvent(input, "change");
+                        view.detectChanges();
+
+                        expect(DOM.classList(input))
+                            .toEqual(["ng-binding", "ng-touched", "ng-dirty", "ng-valid"]);
+                        tick();
+                      });
+                  flushMicrotasks();
+                })));
+    });
   });
 }
 
diff --git a/modules/angular2/test/forms/model_spec.ts b/modules/angular2/test/forms/model_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ import {FORWARD_REF, Binding, Inject} from 'angular2/di';`
`7`	`7`	`import {ControlContainerDirective} from './control_container_directive';`
`8`	`8`	`import {ControlDirective} from './control_directive';`
`9`	`9`	`import {controlPath} from './shared';`
	`10`	`+import {Control} from '../model';`
`10`	`11`
`11`	`12`	`const controlNameBinding =`
`12`	`13`	`CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => ControlNameDirective)}));`
`@@ -84,11 +85,14 @@ export class ControlNameDirective extends ControlDirective {`
`84`	`85`	`}`
`85`	`86`	`}`
`86`	`87`
	`88`	`+`
`87`	`89`	`onDestroy() { this.formDirective.removeControl(this); }`
`88`	`90`
`89`	`91`	`viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }`
`90`	`92`
`91`	`93`	`get path(): List<string> { return controlPath(this.name, this._parent); }`
`92`	`94`
`93`	`95`	`get formDirective(): any { return this._parent.formDirective; }`
	`96`	`+`
	`97`	`+ get control(): Control { return this.formDirective.getControl(this); }`
`94`	`98`	`}`
Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,8 @@ export class FormModelDirective extends ControlContainerDirective implements For`
`81`	`81`	`ListWrapper.push(this.directives, dir);`
`82`	`82`	`}`
`83`	`83`
	`84`	`+ getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }`
	`85`	`+`
`84`	`86`	`removeControl(dir: ControlDirective): void { ListWrapper.remove(this.directives, dir); }`
`85`	`87`
`86`	`88`	`addControlGroup(dir: ControlGroupDirective) {}`
Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,8 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple`
`43`	`43`	`});`
`44`	`44`	`}`
`45`	`45`
	`46`	`+ getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }`
	`47`	`+`
`46`	`48`	`removeControl(dir: ControlDirective): void {`
`47`	`49`	`this._later(_ => {`
`48`	`50`	`var c = this._findContainer(dir.path);`