feat(forms): added value accessor for input=text
This commit is contained in:
32
modules/angular2/src/forms/directives.js
vendored
32
modules/angular2/src/forms/directives.js
vendored
@ -1,27 +1,28 @@
|
||||
import {Template, Component, Decorator, Ancestor, onChange, PropertySetter} from 'angular2/angular2';
|
||||
import {Optional} from 'angular2/di';
|
||||
import {DOM} from 'angular2/src/dom/dom_adapter';
|
||||
import {isBlank, isPresent, isString, CONST} from 'angular2/src/facade/lang';
|
||||
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {ControlGroup, Control} from './model';
|
||||
import {Validators} from './validators';
|
||||
|
||||
export class ControlValueAccessor {
|
||||
writeValue(value):void{}
|
||||
set onChange(fn){}
|
||||
}
|
||||
//export interface ControlValueAccessor {
|
||||
// writeValue(value):void{}
|
||||
// set onChange(fn){}
|
||||
//}
|
||||
|
||||
@Decorator({
|
||||
selector: '[control]',
|
||||
events: {
|
||||
'change' : 'onChange($event.target.value)'
|
||||
'change' : 'onChange($event.target.value)',
|
||||
'input' : 'onChange($event.target.value)'
|
||||
}
|
||||
})
|
||||
export class DefaultControlDecorator extends ControlValueAccessor {
|
||||
export class DefaultValueAccessor {
|
||||
_setValueProperty:Function;
|
||||
onChange:Function;
|
||||
|
||||
constructor(@PropertySetter('value') setValueProperty:Function) {
|
||||
super();
|
||||
this._setValueProperty = setValueProperty;
|
||||
this.onChange = (_) => {};
|
||||
}
|
||||
@ -33,19 +34,20 @@ export class DefaultControlDecorator extends ControlValueAccessor {
|
||||
|
||||
@Decorator({
|
||||
selector: 'input[type=checkbox]', //should be input[type=checkbox][control]
|
||||
// change the selector once https://github.com/angular/angular/issues/1025 is fixed
|
||||
events: {
|
||||
'change' : 'onChange($event.target.checked)'
|
||||
}
|
||||
})
|
||||
export class CheckboxControlDecorator extends ControlValueAccessor {
|
||||
export class CheckboxControlValueAccessor {
|
||||
_setCheckedProperty:Function;
|
||||
onChange:Function;
|
||||
|
||||
constructor(cd:ControlDirective, @PropertySetter('checked') setCheckedProperty:Function) {
|
||||
super();
|
||||
this._setCheckedProperty = setCheckedProperty;
|
||||
this.onChange = (_) => {};
|
||||
//TODO: vsavkin ControlDirective should inject CheckboxControlDirective
|
||||
cd.valueAccessor = this;
|
||||
cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
|
||||
}
|
||||
|
||||
writeValue(value) {
|
||||
@ -64,11 +66,11 @@ export class ControlDirective {
|
||||
_groupDirective:ControlGroupDirective;
|
||||
|
||||
controlName:string;
|
||||
valueAccessor:ControlValueAccessor;
|
||||
valueAccessor:any; //ControlValueAccessor
|
||||
|
||||
validator:Function;
|
||||
|
||||
constructor(@Ancestor() groupDirective:ControlGroupDirective, valueAccessor:DefaultControlDecorator) {
|
||||
constructor(@Ancestor() groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor) {
|
||||
this._groupDirective = groupDirective;
|
||||
this.controlName = null;
|
||||
this.valueAccessor = valueAccessor;
|
||||
@ -99,10 +101,6 @@ export class ControlDirective {
|
||||
this.valueAccessor.onChange = (newValue) => this._control().updateValue(newValue);
|
||||
}
|
||||
|
||||
_updateControlValue(newValue) {
|
||||
this._control().updateValue(newValue);
|
||||
}
|
||||
|
||||
_control() {
|
||||
return this._groupDirective.findControl(this.controlName);
|
||||
}
|
||||
@ -158,5 +156,5 @@ export class ControlGroupDirective {
|
||||
}
|
||||
|
||||
export var FormDirectives = [
|
||||
ControlGroupDirective, ControlDirective, CheckboxControlDecorator, DefaultControlDecorator
|
||||
ControlGroupDirective, ControlDirective, CheckboxControlValueAccessor, DefaultValueAccessor
|
||||
];
|
||||
|
Reference in New Issue
Block a user