feat(forms): added support for arrays of controls

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