feat(forms): added support for arrays of controls

Author: vsavkin

modules/angular2/src/forms/form_builder.js

@@ -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)) {

modules/angular2/src/forms/model.js

@@ -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;
+ }
 }

modules/angular2/src/forms/validators.js

@@ -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);
+ });
+ }
 }

modules/angular2/test/forms/form_builder_spec.js

@@ -60,5 +60,18 @@ export function main() {
  expect(g.controls["login"].validator).toBe(Validators.nullValidator);
  expect(g.validator).toBe(Validators.group);
  });
+
+ it("should create control arrays", () => {
+ var c = b.control("three");
+ var a = b.array([
+ "one",
+ ["two", Validators.required],
+ c,
+ b.array(['four'])
+ ]);
+
+ expect(a.value).toEqual(['one', 'two', 'three', ['four']]);
+ });
  });
-}
+}
+