feat(forms): added support for arrays of controls
This commit is contained in:
15
modules/angular2/src/forms/form_builder.js
vendored
15
modules/angular2/src/forms/form_builder.js
vendored
@ -1,4 +1,4 @@
|
||||
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';
|
||||
import {StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
|
||||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
import * as modelModule from './model';
|
||||
|
||||
@ -24,6 +24,15 @@ export class FormBuilder {
|
||||
}
|
||||
}
|
||||
|
||||
array(controlsConfig:List, validator:Function = null):modelModule.ControlArray {
|
||||
var controls = ListWrapper.map(controlsConfig, (c) => this._createControl(c));
|
||||
if (isPresent(validator)) {
|
||||
return new modelModule.ControlArray(controls, validator);
|
||||
} else {
|
||||
return new modelModule.ControlArray(controls);
|
||||
}
|
||||
}
|
||||
|
||||
_reduceControls(controlsConfig) {
|
||||
var controls = {};
|
||||
StringMapWrapper.forEach(controlsConfig, (controlConfig, controlName) => {
|
||||
@ -33,7 +42,9 @@ export class FormBuilder {
|
||||
}
|
||||
|
||||
_createControl(controlConfig) {
|
||||
if (controlConfig instanceof modelModule.Control || controlConfig instanceof modelModule.ControlGroup) {
|
||||
if (controlConfig instanceof modelModule.Control ||
|
||||
controlConfig instanceof modelModule.ControlGroup ||
|
||||
controlConfig instanceof modelModule.ControlArray) {
|
||||
return controlConfig;
|
||||
|
||||
} else if (ListWrapper.isList(controlConfig)) {
|
||||
|
74
modules/angular2/src/forms/model.js
vendored
74
modules/angular2/src/forms/model.js
vendored
@ -1,6 +1,6 @@
|
||||
import {isPresent} from 'angular2/src/facade/lang';
|
||||
import {Observable, ObservableWrapper} from 'angular2/src/facade/async';
|
||||
import {StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
|
||||
import {StringMap, StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
|
||||
import {Validators} from './validators';
|
||||
|
||||
export const VALID = "VALID";
|
||||
@ -23,9 +23,12 @@ export class AbstractControl {
|
||||
_status:string;
|
||||
_errors;
|
||||
_pristine:boolean;
|
||||
_parent:ControlGroup;
|
||||
_parent:any; /* ControlGroup | ControlArray */
|
||||
validator:Function;
|
||||
|
||||
valueChanges:Observable;
|
||||
_valueChangesController;
|
||||
|
||||
constructor(validator:Function) {
|
||||
this.validator = validator;
|
||||
this._pristine = true;
|
||||
@ -67,9 +70,6 @@ export class AbstractControl {
|
||||
}
|
||||
|
||||
export class Control extends AbstractControl {
|
||||
valueChanges:Observable;
|
||||
_valueChangesController;
|
||||
|
||||
constructor(value:any, validator:Function = Validators.nullValidator) {
|
||||
super(validator);
|
||||
this._setValueErrorsStatus(value);
|
||||
@ -98,9 +98,6 @@ export class ControlGroup extends AbstractControl {
|
||||
controls;
|
||||
optionals;
|
||||
|
||||
valueChanges:Observable;
|
||||
_valueChangesController;
|
||||
|
||||
constructor(controls, optionals = null, validator:Function = Validators.group) {
|
||||
super(validator);
|
||||
this.controls = controls;
|
||||
@ -170,4 +167,65 @@ export class ControlGroup extends AbstractControl {
|
||||
var isOptional = StringMapWrapper.contains(this.optionals, controlName);
|
||||
return !isOptional || StringMapWrapper.get(this.optionals, controlName);
|
||||
}
|
||||
}
|
||||
|
||||
export class ControlArray extends AbstractControl {
|
||||
controls:List;
|
||||
|
||||
constructor(controls:List, validator:Function = Validators.array) {
|
||||
super(validator);
|
||||
this.controls = controls;
|
||||
|
||||
this._valueChangesController = ObservableWrapper.createController();
|
||||
this.valueChanges = ObservableWrapper.createObservable(this._valueChangesController);
|
||||
|
||||
this._setParentForControls();
|
||||
this._setValueErrorsStatus();
|
||||
}
|
||||
|
||||
at(index:number) {
|
||||
return this.controls[index];
|
||||
}
|
||||
|
||||
push(control) {
|
||||
ListWrapper.push(this.controls, control);
|
||||
control.setParent(this);
|
||||
this._updateValue();
|
||||
}
|
||||
|
||||
insert(index:number, control) {
|
||||
ListWrapper.insert(this.controls, index, control);
|
||||
control.setParent(this);
|
||||
this._updateValue();
|
||||
}
|
||||
|
||||
removeAt(index:number) {
|
||||
ListWrapper.removeAt(this.controls, index);
|
||||
this._updateValue();
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this.controls.length;
|
||||
}
|
||||
|
||||
_updateValue() {
|
||||
this._setValueErrorsStatus();
|
||||
this._pristine = false;
|
||||
|
||||
ObservableWrapper.callNext(this._valueChangesController, this._value);
|
||||
|
||||
this._updateParent();
|
||||
}
|
||||
|
||||
_setParentForControls() {
|
||||
ListWrapper.forEach(this.controls, (control) => {
|
||||
control.setParent(this);
|
||||
});
|
||||
}
|
||||
|
||||
_setValueErrorsStatus() {
|
||||
this._value = ListWrapper.map(this.controls, (c) => c.value);
|
||||
this._errors = this.validator(this);
|
||||
this._status = isPresent(this._errors) ? INVALID : VALID;
|
||||
}
|
||||
}
|
26
modules/angular2/src/forms/validators.js
vendored
26
modules/angular2/src/forms/validators.js
vendored
@ -26,14 +26,28 @@ export class Validators {
|
||||
var res = {};
|
||||
StringMapWrapper.forEach(c.controls, (control, name) => {
|
||||
if (c.contains(name) && isPresent(control.errors)) {
|
||||
StringMapWrapper.forEach(control.errors, (value, error) => {
|
||||
if (!StringMapWrapper.contains(res, error)) {
|
||||
res[error] = [];
|
||||
}
|
||||
ListWrapper.push(res[error], control);
|
||||
});
|
||||
Validators._mergeErrors(control, res);
|
||||
}
|
||||
});
|
||||
return StringMapWrapper.isEmpty(res) ? null : res;
|
||||
}
|
||||
|
||||
static array(c:modelModule.ControlArray) {
|
||||
var res = {};
|
||||
ListWrapper.forEach(c.controls, (control) => {
|
||||
if (isPresent(control.errors)) {
|
||||
Validators._mergeErrors(control, res);
|
||||
}
|
||||
});
|
||||
return StringMapWrapper.isEmpty(res) ? null : res;
|
||||
}
|
||||
|
||||
static _mergeErrors(control, res) {
|
||||
StringMapWrapper.forEach(control.errors, (value, error) => {
|
||||
if (!StringMapWrapper.contains(res, error)) {
|
||||
res[error] = [];
|
||||
}
|
||||
ListWrapper.push(res[error], control);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user