Skip to content

Commit 3baf815

Browse files
vsavkinvsavkin
committed
feat(forms): added support for status classes
1 parent 96cadcc commit 3baf815

13 files changed

Lines changed: 167 additions & 38 deletions

‎modules/angular2/src/core/compiler/proto_view_factory.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,10 @@ class BindingRecordsCreator {
105105
if (directiveRecord.callOnCheck) {
106106
ListWrapper.push(bindings, BindingRecord.createDirectiveOnCheck(directiveRecord));
107107
}
108+
}
108109

110+
for (var i = 0; i < directiveBinders.length; i++) {
111+
var directiveBinder = directiveBinders[i];
109112
// host properties
110113
MapWrapper.forEach(directiveBinder.hostPropertyBindings, (astWithSource, propertyName) => {
111114
var dirIndex = new DirectiveIndex(boundElementIndex, i);

‎modules/angular2/src/forms/directives/checkbox_value_accessor.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {ElementRef, Directive} from 'angular2/angular2';
2-
import {Renderer} from 'angular2/src/render/api';
1+
import {Directive} from 'angular2/angular2';
32
import {ControlDirective} from './control_directive';
43
import {ControlValueAccessor} from './control_value_accessor';
54

@@ -18,23 +17,28 @@ import {ControlValueAccessor} from './control_value_accessor';
1817
selector:
1918
'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
2019
hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
21-
hostProperties: {'checked': 'checked'}
20+
hostProperties: {
21+
'checked': 'checked',
22+
'cd.control?.untouched == true': 'class.ng-untouched',
23+
'cd.control?.touched == true': 'class.ng-touched',
24+
'cd.control?.pristine == true': 'class.ng-pristine',
25+
'cd.control?.dirty == true': 'class.ng-dirty',
26+
'cd.control?.valid == true': 'class.ng-valid',
27+
'cd.control?.valid == false': 'class.ng-invalid'
28+
}
2229
})
2330
export class CheckboxControlValueAccessor implements ControlValueAccessor {
2431
checked: boolean;
2532
onChange: Function;
2633
onTouched: Function;
2734

28-
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
35+
constructor(private cd: ControlDirective) {
2936
this.onChange = (_) => {};
3037
this.onTouched = (_) => {};
3138
cd.valueAccessor = this;
3239
}
3340

34-
writeValue(value) {
35-
this._renderer.setElementProperty(this._elementRef.parentView.render,
36-
this._elementRef.boundElementIndex, 'checked', value)
37-
}
41+
writeValue(value) { this.checked = value; }
3842

3943
registerOnChange(fn): void { this.onChange = fn; }
4044
registerOnTouched(fn): void { this.onTouched = fn; }

‎modules/angular2/src/forms/directives/control_directive.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {ControlValueAccessor} from './control_value_accessor';
22
import {Validators} from '../validators';
3+
import {Control} from '../model';
34

45
/**
56
* A directive that bind a [ng-control] object to a DOM element.
@@ -12,6 +13,7 @@ export class ControlDirective {
1213
validator: Function;
1314

1415
get path(): List<string> { return null; }
16+
get control(): Control { return null; }
1517
constructor() { this.validator = Validators.nullValidator; }
1618

1719
viewToModelUpdate(newValue: any): void {}

‎modules/angular2/src/forms/directives/control_name_directive.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {FORWARD_REF, Binding, Inject} from 'angular2/di';
77
import {ControlContainerDirective} from './control_container_directive';
88
import {ControlDirective} from './control_directive';
99
import {controlPath} from './shared';
10+
import {Control} from '../model';
1011

1112
const controlNameBinding =
1213
CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => ControlNameDirective)}));
@@ -84,11 +85,14 @@ export class ControlNameDirective extends ControlDirective {
8485
}
8586
}
8687

88+
8789
onDestroy() { this.formDirective.removeControl(this); }
8890

8991
viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
9092

9193
get path(): List<string> { return controlPath(this.name, this._parent); }
9294

9395
get formDirective(): any { return this._parent.formDirective; }
96+
97+
get control(): Control { return this.formDirective.getControl(this); }
9498
}

‎modules/angular2/src/forms/directives/default_value_accessor.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {ElementRef, Directive} from 'angular2/angular2';
2-
import {Renderer} from 'angular2/src/render/api';
1+
import {Directive} from 'angular2/angular2';
32
import {ControlDirective} from './control_directive';
43
import {ControlValueAccessor} from './control_value_accessor';
54

@@ -24,24 +23,30 @@ import {ControlValueAccessor} from './control_value_accessor';
2423
'input': 'onChange($event.target.value)',
2524
'blur': 'onTouched()'
2625
},
27-
hostProperties: {'value': 'value'}
26+
hostProperties: {
27+
'value': 'value',
28+
'cd.control?.untouched == true': 'class.ng-untouched',
29+
'cd.control?.touched == true': 'class.ng-touched',
30+
'cd.control?.pristine == true': 'class.ng-pristine',
31+
'cd.control?.dirty == true': 'class.ng-dirty',
32+
'cd.control?.valid == true': 'class.ng-valid',
33+
'cd.control?.valid == false': 'class.ng-invalid'
34+
}
2835
})
2936
export class DefaultValueAccessor implements ControlValueAccessor {
3037
value = null;
3138
onChange: Function;
3239
onTouched: Function;
3340

34-
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
41+
constructor(private cd: ControlDirective) {
3542
this.onChange = (_) => {};
3643
this.onTouched = (_) => {};
3744
cd.valueAccessor = this;
3845
}
3946

40-
writeValue(value) {
41-
this._renderer.setElementProperty(this._elementRef.parentView.render,
42-
this._elementRef.boundElementIndex, 'value', value)
43-
}
47+
writeValue(value) { this.value = value; }
4448

4549
registerOnChange(fn): void { this.onChange = fn; }
50+
4651
registerOnTouched(fn): void { this.onTouched = fn; }
4752
}

‎modules/angular2/src/forms/directives/form_control_directive.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ const formControlBinding =
4747
@Directive({
4848
selector: '[ng-form-control]',
4949
hostInjector: [formControlBinding],
50-
properties: ['control: ng-form-control', 'model: ng-model'],
50+
properties: ['form: ng-form-control', 'model: ng-model'],
5151
events: ['ngModel'],
5252
lifecycle: [onChange]
5353
})
5454
export class FormControlDirective extends ControlDirective {
55-
control: Control;
55+
form: Control;
5656
ngModel: EventEmitter;
5757
_added: boolean;
5858
model: any;
@@ -65,14 +65,18 @@ export class FormControlDirective extends ControlDirective {
6565

6666
onChange(c) {
6767
if (!this._added) {
68-
setUpControl(this.control, this);
69-
this.control.updateValidity();
68+
setUpControl(this.form, this);
69+
this.form.updateValidity();
7070
this._added = true;
7171
}
7272
if (StringMapWrapper.contains(c, "model")) {
73-
this.control.updateValue(this.model);
73+
this.form.updateValue(this.model);
7474
}
7575
}
7676

77+
get control(): Control { return this.form; }
78+
79+
get path(): List<string> { return []; }
80+
7781
viewToModelUpdate(newValue: any): void { ObservableWrapper.callNext(this.ngModel, newValue); }
7882
}

‎modules/angular2/src/forms/directives/form_directive.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import {ControlDirective} from './control_directive';
22
import {ControlGroupDirective} from './control_group_directive';
3+
import {Control} from '../model';
34

45
export interface FormDirective {
56
addControl(dir: ControlDirective): void;
67
removeControl(dir: ControlDirective): void;
8+
getControl(dir: ControlDirective): Control;
79
addControlGroup(dir: ControlGroupDirective): void;
810
removeControlGroup(dir: ControlGroupDirective): void;
911
updateModel(dir: ControlDirective, value: any): void;

‎modules/angular2/src/forms/directives/form_model_directive.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ export class FormModelDirective extends ControlContainerDirective implements For
8181
ListWrapper.push(this.directives, dir);
8282
}
8383

84+
getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
85+
8486
removeControl(dir: ControlDirective): void { ListWrapper.remove(this.directives, dir); }
8587

8688
addControlGroup(dir: ControlGroupDirective) {}

‎modules/angular2/src/forms/directives/select_control_value_accessor.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import {ElementRef, Directive} from 'angular2/angular2';
2-
import {Renderer} from 'angular2/src/render/api';
1+
import {Directive} from 'angular2/angular2';
32
import {ControlDirective} from './control_directive';
43
import {ControlValueAccessor} from './control_value_accessor';
54

@@ -23,24 +22,29 @@ import {ControlValueAccessor} from './control_value_accessor';
2322
'input': 'onChange($event.target.value)',
2423
'blur': 'onTouched()'
2524
},
26-
hostProperties: {'value': 'value'}
25+
hostProperties: {
26+
'value': 'value',
27+
'cd.control?.untouched == true': 'class.ng-untouched',
28+
'cd.control?.touched == true': 'class.ng-touched',
29+
'cd.control?.pristine == true': 'class.ng-pristine',
30+
'cd.control?.dirty == true': 'class.ng-dirty',
31+
'cd.control?.valid == true': 'class.ng-valid',
32+
'cd.control?.valid == false': 'class.ng-invalid'
33+
}
2734
})
2835
export class SelectControlValueAccessor implements ControlValueAccessor {
2936
value = null;
3037
onChange: Function;
3138
onTouched: Function;
3239

33-
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
40+
constructor(private cd: ControlDirective) {
3441
this.onChange = (_) => {};
3542
this.onTouched = (_) => {};
3643
this.value = '';
3744
cd.valueAccessor = this;
3845
}
3946

40-
writeValue(value) {
41-
this._renderer.setElementProperty(this._elementRef.parentView.render,
42-
this._elementRef.boundElementIndex, 'value', value)
43-
}
47+
writeValue(value) { this.value = value; }
4448

4549
registerOnChange(fn): void { this.onChange = fn; }
4650
registerOnTouched(fn): void { this.onTouched = fn; }

‎modules/angular2/src/forms/directives/template_driven_form_directive.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple
4343
});
4444
}
4545

46+
getControl(dir: ControlDirective): Control { return <Control>this.form.find(dir.path); }
47+
4648
removeControl(dir: ControlDirective): void {
4749
this._later(_ => {
4850
var c = this._findContainer(dir.path);

0 commit comments

Comments
 (0)