feat(forms): implemented template-driven forms

This commit is contained in:
vsavkin
2015-05-30 11:56:00 -07:00
parent 5c53cf6486
commit a9d6fd9afa
19 changed files with 835 additions and 349 deletions

View File

@ -1,279 +1,23 @@
import {Directive, Ancestor} from 'angular2/src/core/annotations/decorators';
import {Optional} from 'angular2/src/di/decorators';
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {Renderer} from 'angular2/src/render/api';
import {
isPresent,
isString,
CONST_EXPR,
isBlank,
BaseException,
Type
} from 'angular2/src/facade/lang';
import {ListWrapper} from 'angular2/src/facade/collection';
import {ControlGroup, Control, isControl} from './model';
import {Validators} from './validators';
import {Type, CONST_EXPR} from 'angular2/src/facade/lang';
import {ControlNameDirective} from './directives/control_name_directive';
import {FormControlDirective} from './directives/form_control_directive';
import {ControlGroupDirective} from './directives/control_group_directive';
import {FormModelDirective} from './directives/form_model_directive';
import {TemplateDrivenFormDirective} from './directives/template_driven_form_directive';
import {DefaultValueAccessor} from './directives/default_value_accessor';
import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
import {SelectControlValueAccessor} from './directives/select_control_value_accessor';
function _lookupControl(groupDirective: ControlGroupDirective, controlOrName: any): any {
if (isControl(controlOrName)) {
return controlOrName;
}
if (isBlank(groupDirective)) {
throw new BaseException(`No control group found for "${controlOrName}"`);
}
var control = groupDirective.findControl(controlOrName);
if (isBlank(control)) {
throw new BaseException(`Cannot find control "${controlOrName}"`);
}
return control;
}
/**
* Binds a control group to a DOM element.
*
* # Example
*
* In this example, we bind the control group to the form element, and we bind the login and
* password controls to the
* login and password elements.
*
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [formDirectives],
* inline: "<form [control-group]='loginForm'>" +
* "Login <input type='text' control='login'>" +
* "Password <input type='password' control='password'>" +
* "<button (click)="onLogin()">Login</button>" +
* "</form>"
* })
* class LoginComp {
* loginForm:ControlGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* });
* }
*
* onLogin() {
* // this.loginForm.value
* }
* }
*
* ```
*
* @exportedAs angular2/forms
*/
@Directive({selector: '[control-group]', properties: ['controlOrName: control-group']})
export class ControlGroupDirective {
_groupDirective: ControlGroupDirective;
_directives: List<ControlDirective>;
_controlOrName: any;
constructor(@Optional() @Ancestor() groupDirective: ControlGroupDirective) {
this._groupDirective = groupDirective;
this._directives = ListWrapper.create();
}
set controlOrName(controlOrName) {
this._controlOrName = controlOrName;
this._updateDomValue();
}
_updateDomValue() { ListWrapper.forEach(this._directives, (cd) => cd._updateDomValue()); }
addDirective(c: ControlDirective) { ListWrapper.push(this._directives, c); }
findControl(name: string): any { return this._getControlGroup().controls[name]; }
_getControlGroup(): ControlGroup {
return _lookupControl(this._groupDirective, this._controlOrName);
}
}
/**
* Binds a control to a DOM element.
*
* # Example
*
* In this example, we bind the control to an input element. When the value of the input element
* changes, the value of
* the control will reflect that change. Likewise, if the value of the control changes, the input
* element reflects that
* change.
*
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [formDirectives],
* inline: "<input type='text' [control]='loginControl'>"
* })
* class LoginComp {
* loginControl:Control;
*
* constructor() {
* this.loginControl = new Control('');
* }
* }
*
* ```
*
* @exportedAs angular2/forms
*/
@Directive({selector: '[control]', properties: ['controlOrName: control']})
export class ControlDirective {
_groupDirective: ControlGroupDirective;
_controlOrName: any;
valueAccessor: any; // ControlValueAccessor
validator: Function;
constructor(@Optional() @Ancestor() groupDirective: ControlGroupDirective) {
this._groupDirective = groupDirective;
this._controlOrName = null;
this.validator = Validators.nullValidator;
}
set controlOrName(controlOrName) {
this._controlOrName = controlOrName;
if (isPresent(this._groupDirective)) {
this._groupDirective.addDirective(this);
}
var c = this._control();
c.validator = Validators.compose([c.validator, this.validator]);
if (isBlank(this.valueAccessor)) {
throw new BaseException(`Cannot find value accessor for control "${controlOrName}"`);
}
this._updateDomValue();
this._setUpUpdateControlValue();
}
_updateDomValue() { this.valueAccessor.writeValue(this._control().value); }
_setUpUpdateControlValue() {
this.valueAccessor.onChange = (newValue) => this._control().updateValue(newValue);
}
_control() { return _lookupControl(this._groupDirective, this._controlOrName); }
}
/**
* The default accessor for writing a value and listening to changes that is used by a {@link
* Control} directive.
*
* This is the default strategy that Angular uses when no other accessor is applied.
*
* # Example
* ```
* <input type="text" [control]="loginControl">
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: 'input:not([type=checkbox])[control],textarea[control]',
hostListeners:
{'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
hostProperties: {'value': 'value'}
})
export class DefaultValueAccessor {
value = null;
onChange: Function;
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
this.onChange = (_) => {};
cd.valueAccessor = this;
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.parentView.render,
this._elementRef.boundElementIndex, 'value', value)
}
}
/**
* The accessor for writing a value and listening to changes that is used by a {@link
* Control} directive.
*
* This is the default strategy that Angular uses when no other accessor is applied.
*
* # Example
* ```
* <input type="text" [control]="loginControl">
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: 'select[control]',
hostListeners:
{'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
hostProperties: {'value': 'value'}
})
export class SelectControlValueAccessor {
value = null;
onChange: Function;
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
this.onChange = (_) => {};
this.value = '';
cd.valueAccessor = this;
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.parentView.render,
this._elementRef.boundElementIndex, 'value', value)
}
}
/**
* The accessor for writing a value and listening to changes on a checkbox input element.
*
*
* # Example
* ```
* <input type="checkbox" [control]="rememberLogin">
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: 'input[type=checkbox][control]',
hostListeners: {'change': 'onChange($event.target.checked)'},
hostProperties: {'checked': 'checked'}
})
export class CheckboxControlValueAccessor {
checked: boolean;
onChange: Function;
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
this.onChange = (_) => {};
cd.valueAccessor = this;
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.parentView.render,
this._elementRef.boundElementIndex, 'checked', value)
}
}
export {ControlNameDirective} from './directives/control_name_directive';
export {FormControlDirective} from './directives/form_control_directive';
export {ControlDirective} from './directives/control_directive';
export {ControlGroupDirective} from './directives/control_group_directive';
export {FormModelDirective} from './directives/form_model_directive';
export {TemplateDrivenFormDirective} from './directives/template_driven_form_directive';
export {ControlValueAccessor} from './directives/control_value_accessor';
export {DefaultValueAccessor} from './directives/default_value_accessor';
export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
export {SelectControlValueAccessor} from './directives/select_control_value_accessor';
/**
*
@ -284,9 +28,14 @@ export class CheckboxControlValueAccessor {
* @exportedAs angular2/forms
*/
export const formDirectives: List<Type> = CONST_EXPR([
ControlNameDirective,
ControlGroupDirective,
ControlDirective,
CheckboxControlValueAccessor,
FormControlDirective,
FormModelDirective,
TemplateDrivenFormDirective,
DefaultValueAccessor,
CheckboxControlValueAccessor,
SelectControlValueAccessor
]);
]);

View File

@ -0,0 +1,37 @@
import {ElementRef, Directive} from 'angular2/angular2';
import {Renderer} from 'angular2/src/render/api';
import {ControlDirective} from './control_directive';
import {ControlValueAccessor} from './control_value_accessor';
/**
* The accessor for writing a value and listening to changes on a checkbox input element.
*
*
* # Example
* ```
* <input type="checkbox" [control]="rememberLogin">
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: 'input[type=checkbox][control],input[type=checkbox][form-control]',
hostListeners: {'change': 'onChange($event.target.checked)'},
hostProperties: {'checked': 'checked'}
})
export class CheckboxControlValueAccessor implements ControlValueAccessor {
checked: boolean;
onChange: Function;
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
this.onChange = (_) => {};
cd.valueAccessor = this;
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.parentView.render,
this._elementRef.boundElementIndex, 'checked', value)
}
registerOnChange(fn) { this.onChange = fn; }
}

View File

@ -0,0 +1,8 @@
import {FormDirective} from './form_directive';
import {List} from 'angular2/src/facade/collection';
export class ControlContainerDirective {
name: string;
get formDirective(): FormDirective { return null; }
get path(): List<string> { return null; }
}

View File

@ -0,0 +1,11 @@
import {ControlValueAccessor} from './control_value_accessor';
import {Validators} from '../validators';
export class ControlDirective {
name: string = null;
valueAccessor: ControlValueAccessor = null;
validator: Function;
get path(): List<string> { return null; }
constructor() { this.validator = Validators.nullValidator; }
}

View File

@ -0,0 +1,73 @@
import {Directive, Ancestor, onDestroy, onInit} from 'angular2/angular2';
import {Inject, FORWARD_REF, Binding} from 'angular2/di';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {CONST_EXPR} from 'angular2/src/facade/lang';
import {ControlContainerDirective} from './control_container_directive';
import {controlPath} from './shared';
const controlGroupBinding = CONST_EXPR(
new Binding(ControlContainerDirective, {toAlias: FORWARD_REF(() => ControlGroupDirective)}));
/**
* Binds a control group to a DOM element.
*
* # Example
*
* In this example, we bind the control group to the form element, and we bind the login and
* password controls to the
* login and password elements.
*
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [formDirectives],
* template: "<form [control-group]='loginForm'>" +
* "Login <input type='text' control='login'>" +
* "Password <input type='password' control='password'>" +
* "<button (click)="onLogin()">Login</button>" +
* "</form>"
* })
* class LoginComp {
* loginForm:ControlGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* });
* }
*
* onLogin() {
* // this.loginForm.value
* }
* }
*
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: '[control-group]',
hostInjector: [controlGroupBinding],
properties: ['name: control-group'],
lifecycle: [onInit, onDestroy]
})
export class ControlGroupDirective extends ControlContainerDirective {
_parent: ControlContainerDirective;
constructor(@Ancestor() _parent: ControlContainerDirective) {
super();
this._parent = _parent;
}
onInit() { this.formDirective.addControlGroup(this); }
onDestroy() { this.formDirective.removeControlGroup(this); }
get path(): List<string> { return controlPath(this.name, this._parent); }
get formDirective(): any { return this._parent.formDirective; }
}

View File

@ -0,0 +1,65 @@
import {CONST_EXPR} from 'angular2/src/facade/lang';
import {List} from 'angular2/src/facade/collection';
import {Directive, Ancestor, onDestroy, onInit} from 'angular2/angular2';
import {FORWARD_REF, Binding, Inject} from 'angular2/di';
import {ControlContainerDirective} from './control_container_directive';
import {ControlDirective} from './control_directive';
import {controlPath} from './shared';
const controlNameBinding =
CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => ControlNameDirective)}));
/**
* Binds a control to a DOM element.
*
* # Example
*
* In this example, we bind the control to an input element. When the value of the input element
* changes, the value of
* the control will reflect that change. Likewise, if the value of the control changes, the input
* element reflects that
* change.
*
* Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
* `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
*
* ```
* @Component({selector: "login-comp"})
* @View({
* directives: [formDirectives],
* template: "<input type='text' [control]='loginControl'>"
* })
* class LoginComp {
* loginControl:Control;
*
* constructor() {
* this.loginControl = new Control('');
* }
* }
*
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: '[control]',
hostInjector: [controlNameBinding],
properties: ['name: control'],
lifecycle: [onDestroy, onInit]
})
export class ControlNameDirective extends ControlDirective {
_parent: ControlContainerDirective;
constructor(@Ancestor() _parent: ControlContainerDirective) {
super();
this._parent = _parent;
}
onInit() { this.formDirective.addControl(this); }
onDestroy() { this.formDirective.removeControl(this); }
get path(): List<string> { return controlPath(this.name, this._parent); }
get formDirective(): any { return this._parent.formDirective; }
}

View File

@ -0,0 +1,4 @@
export interface ControlValueAccessor {
writeValue(obj: any): void;
registerOnChange(fun: any): void;
}

View File

@ -0,0 +1,41 @@
import {ElementRef, Directive} from 'angular2/angular2';
import {Renderer} from 'angular2/src/render/api';
import {ControlDirective} from './control_directive';
import {ControlValueAccessor} from './control_value_accessor';
/**
* The default accessor for writing a value and listening to changes that is used by a {@link
* Control} directive.
*
* This is the default strategy that Angular uses when no other accessor is applied.
*
* # Example
* ```
* <input type="text" [control]="loginControl">
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector:
'input:not([type=checkbox])[control],textarea[control],input:not([type=checkbox])[form-control],textarea[form-control]',
hostListeners:
{'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
hostProperties: {'value': 'value'}
})
export class DefaultValueAccessor implements ControlValueAccessor {
value = null;
onChange: Function;
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
this.onChange = (_) => {};
cd.valueAccessor = this;
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.parentView.render,
this._elementRef.boundElementIndex, 'value', value)
}
registerOnChange(fn) { this.onChange = fn; }
}

View File

@ -0,0 +1,25 @@
import {CONST_EXPR} from 'angular2/src/facade/lang';
import {Directive, Ancestor, onChange} from 'angular2/angular2';
import {FORWARD_REF, Binding} from 'angular2/di';
import {ControlDirective} from './control_directive';
import {Control} from '../model';
import {setUpControl} from './shared';
const formControlBinding =
CONST_EXPR(new Binding(ControlDirective, {toAlias: FORWARD_REF(() => FormControlDirective)}));
@Directive({
selector: '[form-control]',
hostInjector: [formControlBinding],
properties: ['control: form-control'],
lifecycle: [onChange]
})
export class FormControlDirective extends ControlDirective {
control: Control;
onChange(_) {
setUpControl(this.control, this);
this.control.updateValidity();
}
}

View File

@ -0,0 +1,9 @@
import {ControlDirective} from './control_directive';
import {ControlGroupDirective} from './control_group_directive';
export interface FormDirective {
addControl(dir: ControlDirective): void;
removeControl(dir: ControlDirective): void;
addControlGroup(dir: ControlGroupDirective): void;
removeControlGroup(dir: ControlGroupDirective): void;
}

View File

@ -0,0 +1,55 @@
import {CONST_EXPR} from 'angular2/src/facade/lang';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {Directive, onChange} from 'angular2/angular2';
import {FORWARD_REF, Binding} from 'angular2/di';
import {ControlDirective} from './control_directive';
import {ControlGroupDirective} from './control_group_directive';
import {ControlContainerDirective} from './control_container_directive';
import {FormDirective} from './form_directive';
import {ControlGroup} from '../model';
import {setUpControl} from './shared';
const formDirectiveBinding = CONST_EXPR(
new Binding(ControlContainerDirective, {toAlias: FORWARD_REF(() => FormModelDirective)}));
@Directive({
selector: '[form-model]',
hostInjector: [formDirectiveBinding],
properties: ['form: form-model'],
lifecycle: [onChange]
})
export class FormModelDirective extends ControlContainerDirective implements FormDirective {
form: ControlGroup = null;
directives: List<ControlDirective>;
constructor() {
super();
this.directives = [];
}
onChange(_) { this._updateDomValue(); }
get formDirective(): FormDirective { return this; }
get path(): List<string> { return []; }
addControl(dir: ControlDirective): void {
var c: any = this.form.find(dir.path);
setUpControl(c, dir);
c.updateValidity();
ListWrapper.push(this.directives, dir);
}
removeControl(dir: ControlDirective): void { ListWrapper.remove(this.directives, dir); }
addControlGroup(dir: ControlGroupDirective) {}
removeControlGroup(dir: ControlGroupDirective) {}
_updateDomValue() {
ListWrapper.forEach(this.directives, dir => {
var c: any = this.form.find(dir.path);
dir.valueAccessor.writeValue(c.value);
});
}
}

View File

@ -0,0 +1,41 @@
import {ElementRef, Directive} from 'angular2/angular2';
import {Renderer} from 'angular2/src/render/api';
import {ControlDirective} from './control_directive';
import {ControlValueAccessor} from './control_value_accessor';
/**
* The accessor for writing a value and listening to changes that is used by a {@link
* Control} directive.
*
* This is the default strategy that Angular uses when no other accessor is applied.
*
* # Example
* ```
* <input type="text" [control]="loginControl">
* ```
*
* @exportedAs angular2/forms
*/
@Directive({
selector: 'select[control],select[form-control]',
hostListeners:
{'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
hostProperties: {'value': 'value'}
})
export class SelectControlValueAccessor implements ControlValueAccessor {
value = null;
onChange: Function;
constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
this.onChange = (_) => {};
this.value = '';
cd.valueAccessor = this;
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.parentView.render,
this._elementRef.boundElementIndex, 'value', value)
}
registerOnChange(fn) { this.onChange = fn; }
}

View File

@ -0,0 +1,27 @@
import {ListWrapper} from 'angular2/src/facade/collection';
import {isBlank, BaseException} from 'angular2/src/facade/lang';
import {ControlContainerDirective} from './control_container_directive';
import {ControlDirective} from './control_directive';
import {Control} from '../model';
import {Validators} from '../validators';
export function controlPath(name, parent: ControlContainerDirective) {
var p = ListWrapper.clone(parent.path);
ListWrapper.push(p, name);
return p;
}
export function setUpControl(c: Control, dir: ControlDirective) {
if (isBlank(c)) _throwError(dir, "Cannot find control");
if (isBlank(dir.valueAccessor)) _throwError(dir, "No value accessor for");
c.validator = Validators.compose([c.validator, dir.validator]);
dir.valueAccessor.writeValue(c.value);
dir.valueAccessor.registerOnChange(newValue => c.updateValue(newValue));
}
function _throwError(dir: ControlDirective, message: string): void {
var path = ListWrapper.join(dir.path, " -> ");
throw new BaseException(`${message} '${path}'`);
}

View File

@ -0,0 +1,75 @@
import {PromiseWrapper} from 'angular2/src/facade/async';
import {StringMapWrapper, List, ListWrapper} from 'angular2/src/facade/collection';
import {isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
import {Directive} from 'angular2/src/core/annotations/decorators';
import {FORWARD_REF, Binding} from 'angular2/di';
import {ControlDirective} from './control_directive';
import {FormDirective} from './form_directive';
import {ControlGroupDirective} from './control_group_directive';
import {ControlContainerDirective} from './control_container_directive';
import {AbstractControl, ControlGroup, Control} from '../model';
import {setUpControl} from './shared';
const formDirectiveBinding = CONST_EXPR(new Binding(
ControlContainerDirective, {toAlias: FORWARD_REF(() => TemplateDrivenFormDirective)}));
@Directive({selector: '[form]', hostInjector: [formDirectiveBinding]})
export class TemplateDrivenFormDirective extends ControlContainerDirective implements
FormDirective {
form: ControlGroup;
constructor() {
super();
this.form = new ControlGroup({});
}
get formDirective(): FormDirective { return this; }
get path(): List<string> { return []; }
get controls(): StringMap<string, AbstractControl> { return this.form.controls; }
get value(): any { return this.form.value; }
addControl(dir: ControlDirective): void {
this._later(_ => {
var group = this._findContainer(dir.path);
var c = new Control("");
setUpControl(c, dir);
group.addControl(dir.name, c);
});
}
removeControl(dir: ControlDirective): void {
this._later(_ => {
var c = this._findContainer(dir.path);
if (isPresent(c)) c.removeControl(dir.name)
});
}
addControlGroup(dir: ControlGroupDirective): void {
this._later(_ => {
var group = this._findContainer(dir.path);
var c = new ControlGroup({});
group.addControl(dir.name, c);
});
}
removeControlGroup(dir: ControlGroupDirective): void {
this._later(_ => {
var c = this._findContainer(dir.path);
if (isPresent(c)) c.removeControl(dir.name)
});
}
_findContainer(path: List<string>): ControlGroup {
ListWrapper.removeLast(path);
return <ControlGroup>this.form.find(path);
}
_later(fn) {
var c = PromiseWrapper.completer();
PromiseWrapper.then(c.promise, fn, (_) => {});
c.resolve(null);
}
}

View File

@ -1,4 +1,4 @@
import {isPresent} from 'angular2/src/facade/lang';
import {StringWrapper, isPresent} from 'angular2/src/facade/lang';
import {Observable, EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
import {StringMap, StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
import {Validators} from './validators';
@ -42,6 +42,8 @@ export class AbstractControl {
get value(): any { return this._value; }
set value(v) { this._value = v; }
get status(): string { return this._status; }
get valid(): boolean { return this._status === VALID; }
@ -61,6 +63,14 @@ export class AbstractControl {
this._parent._updateValue();
}
}
updateValidity() {
this._errors = this.validator(this);
this._status = isPresent(this._errors) ? INVALID : VALID;
if (isPresent(this._parent)) {
this._parent.updateValidity();
}
}
}
/**
@ -129,6 +139,10 @@ export class ControlGroup extends AbstractControl {
this._setValueErrorsStatus();
}
addControl(name: string, c: AbstractControl) { this.controls[name] = c; }
removeControl(name: string) { StringMapWrapper.delete(this.controls, name); }
include(controlName: string): void {
StringMapWrapper.set(this._optionals, controlName, true);
this._updateValue();
@ -144,6 +158,18 @@ export class ControlGroup extends AbstractControl {
return c && this._included(controlName);
}
find(path: string | List<string>): AbstractControl {
if (!(path instanceof List)) {
path = StringWrapper.split(<string>path, new RegExp("/"));
}
return ListWrapper.reduce(
<List<string>>path, (v, name) => v instanceof ControlGroup && isPresent(v.controls[name]) ?
v.controls[name] :
null,
this);
}
_setParentForControls() {
StringMapWrapper.forEach(this.controls, (control, name) => { control.setParent(this); });
}

View File

@ -1,5 +1,4 @@
import {Directive} from 'angular2/src/core/annotations/decorators';
import {Directive} from 'angular2/angular2';
import {Validators} from './validators';
import {ControlDirective} from './directives';