feat(forms): update FormBuilder to support async validations

vsavkin · vsavkin · commit 1c322f13e5e7 · 2015-11-02T18:03:03.000Z
Closes #5020
diff --git a/modules/angular2/src/core/forms/form_builder.ts b/modules/angular2/src/core/forms/form_builder.ts
@@ -34,7 +34,7 @@ import * as modelModule from './model';
  *       login: ["", Validators.required],
  *       passwordRetry: builder.group({
  *         password: ["", Validators.required],
- *         passwordConfirmation: ["", Validators.required]
+ *         passwordConfirmation: ["", Validators.required, asyncValidator]
  *       })
  *     });
  *   }
@@ -58,36 +58,25 @@ export class FormBuilder {
     var controls = this._reduceControls(controlsConfig);
     var optionals = isPresent(extra) ? StringMapWrapper.get(extra, "optionals") : null;
     var validator = isPresent(extra) ? StringMapWrapper.get(extra, "validator") : null;
-
-    if (isPresent(validator)) {
-      return new modelModule.ControlGroup(controls, optionals, validator);
-    } else {
-      return new modelModule.ControlGroup(controls, optionals);
-    }
+    var asyncValidator = isPresent(extra) ? StringMapWrapper.get(extra, "asyncValidator") : null;
+    return new modelModule.ControlGroup(controls, optionals, validator, asyncValidator);
   }
-
   /**
-   * Construct a new {@link Control} with the given `value` and `validator`.
+   * Construct a new {@link Control} with the given `value`,`validator`, and `asyncValidator`.
    */
-  control(value: Object, validator: Function = null): modelModule.Control {
-    if (isPresent(validator)) {
-      return new modelModule.Control(value, validator);
-    } else {
-      return new modelModule.Control(value);
-    }
+  control(value: Object, validator: Function = null,
+          asyncValidator: Function = null): modelModule.Control {
+    return new modelModule.Control(value, validator, asyncValidator);
   }
 
   /**
    * Construct an array of {@link Control}s from the given `controlsConfig` array of
-   * configuration, with the given optional `validator`.
+   * configuration, with the given optional `validator` and `asyncValidator`.
    */
-  array(controlsConfig: any[], validator: Function = null): modelModule.ControlArray {
+  array(controlsConfig: any[], validator: Function = null,
+        asyncValidator: Function = null): modelModule.ControlArray {
     var controls = controlsConfig.map(c => this._createControl(c));
-    if (isPresent(validator)) {
-      return new modelModule.ControlArray(controls, validator);
-    } else {
-      return new modelModule.ControlArray(controls);
-    }
+    return new modelModule.ControlArray(controls, validator, asyncValidator);
   }
 
   /** @internal */
@@ -109,7 +98,8 @@ export class FormBuilder {
     } else if (isArray(controlConfig)) {
       var value = controlConfig[0];
       var validator = controlConfig.length > 1 ? controlConfig[1] : null;
-      return this.control(value, validator);
+      var asyncValidator = controlConfig.length > 2 ? controlConfig[2] : null;
+      return this.control(value, validator, asyncValidator);
 
     } else {
       return this.control(controlConfig);
diff --git a/modules/angular2/test/core/forms/form_builder_spec.ts b/modules/angular2/test/core/forms/form_builder_spec.ts
@@ -9,9 +9,13 @@ import {
   afterEach,
   el
 } from 'angular2/testing_internal';
-import {Control, FormBuilder, Validators} from 'angular2/core';
+import {Control, FormBuilder} from 'angular2/core';
+import {PromiseWrapper} from 'angular2/src/core/facade/promise';
 
 export function main() {
+  function syncValidator(_) { return null; }
+  function asyncValidator(_) { return PromiseWrapper.resolve(null); }
+
   describe("Form Builder", () => {
     var b;
 
@@ -24,18 +28,21 @@ export function main() {
     });
 
     it("should create controls from an array", () => {
-      var g = b.group({"login": ["some value"], "password": ["some value", Validators.required]});
+      var g = b.group(
+          {"login": ["some value"], "password": ["some value", syncValidator, asyncValidator]});
 
       expect(g.controls["login"].value).toEqual("some value");
       expect(g.controls["password"].value).toEqual("some value");
-      expect(g.controls["password"].validator).toEqual(Validators.required);
+      expect(g.controls["password"].validator).toEqual(syncValidator);
+      expect(g.controls["password"].asyncValidator).toEqual(asyncValidator);
     });
 
     it("should use controls", () => {
-      var g = b.group({"login": b.control("some value", Validators.required)});
+      var g = b.group({"login": b.control("some value", syncValidator, asyncValidator)});
 
       expect(g.controls["login"].value).toEqual("some value");
-      expect(g.controls["login"].validator).toBe(Validators.required);
+      expect(g.controls["login"].validator).toBe(syncValidator);
+      expect(g.controls["login"].asyncValidator).toBe(asyncValidator);
     });
 
     it("should create groups with optional controls", () => {
@@ -45,16 +52,21 @@ export function main() {
     });
 
     it("should create groups with a custom validator", () => {
-      var g = b.group({"login": "some value"}, {"validator": Validators.nullValidator});
+      var g = b.group({"login": "some value"},
+                      {"validator": syncValidator, "asyncValidator": asyncValidator});
 
-      expect(g.validator).toBe(Validators.nullValidator);
+      expect(g.validator).toBe(syncValidator);
+      expect(g.asyncValidator).toBe(asyncValidator);
     });
 
     it("should create control arrays", () => {
       var c = b.control("three");
-      var a = b.array(["one", ["two", Validators.required], c, b.array(['four'])]);
+      var a = b.array(["one", ["two", syncValidator], c, b.array(['four'])], syncValidator,
+                      asyncValidator);
 
       expect(a.value).toEqual(['one', 'two', 'three', ['four']]);
+      expect(a.validator).toBe(syncValidator);
+      expect(a.asyncValidator).toBe(asyncValidator);
     });
   });
 }
