feat(forms): update FormBuilder to support async validations

Closes #5020
This commit is contained in:
vsavkin 2015-11-02 10:00:56 -08:00 committed by Victor Savkin
parent 31c12af81f
commit 1c322f13e5
2 changed files with 33 additions and 31 deletions

View File

@ -34,7 +34,7 @@ import * as modelModule from './model';
* login: ["", Validators.required], * login: ["", Validators.required],
* passwordRetry: builder.group({ * passwordRetry: builder.group({
* password: ["", Validators.required], * password: ["", Validators.required],
* passwordConfirmation: ["", Validators.required] * passwordConfirmation: ["", Validators.required, asyncValidator]
* }) * })
* }); * });
* } * }
@ -58,36 +58,25 @@ export class FormBuilder {
var controls = this._reduceControls(controlsConfig); var controls = this._reduceControls(controlsConfig);
var optionals = isPresent(extra) ? StringMapWrapper.get(extra, "optionals") : null; var optionals = isPresent(extra) ? StringMapWrapper.get(extra, "optionals") : null;
var validator = isPresent(extra) ? StringMapWrapper.get(extra, "validator") : null; var validator = isPresent(extra) ? StringMapWrapper.get(extra, "validator") : null;
var asyncValidator = isPresent(extra) ? StringMapWrapper.get(extra, "asyncValidator") : null;
if (isPresent(validator)) { return new modelModule.ControlGroup(controls, optionals, validator, asyncValidator);
return new modelModule.ControlGroup(controls, optionals, validator);
} else {
return new modelModule.ControlGroup(controls, optionals);
}
} }
/** /**
* 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 { control(value: Object, validator: Function = null,
if (isPresent(validator)) { asyncValidator: Function = null): modelModule.Control {
return new modelModule.Control(value, validator); return new modelModule.Control(value, validator, asyncValidator);
} else {
return new modelModule.Control(value);
}
} }
/** /**
* Construct an array of {@link Control}s from the given `controlsConfig` array of * 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)); var controls = controlsConfig.map(c => this._createControl(c));
if (isPresent(validator)) { return new modelModule.ControlArray(controls, validator, asyncValidator);
return new modelModule.ControlArray(controls, validator);
} else {
return new modelModule.ControlArray(controls);
}
} }
/** @internal */ /** @internal */
@ -109,7 +98,8 @@ export class FormBuilder {
} else if (isArray(controlConfig)) { } else if (isArray(controlConfig)) {
var value = controlConfig[0]; var value = controlConfig[0];
var validator = controlConfig.length > 1 ? controlConfig[1] : null; 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 { } else {
return this.control(controlConfig); return this.control(controlConfig);

View File

@ -9,9 +9,13 @@ import {
afterEach, afterEach,
el el
} from 'angular2/testing_internal'; } 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() { export function main() {
function syncValidator(_) { return null; }
function asyncValidator(_) { return PromiseWrapper.resolve(null); }
describe("Form Builder", () => { describe("Form Builder", () => {
var b; var b;
@ -24,18 +28,21 @@ export function main() {
}); });
it("should create controls from an array", () => { 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["login"].value).toEqual("some value");
expect(g.controls["password"].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", () => { 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"].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", () => { it("should create groups with optional controls", () => {
@ -45,16 +52,21 @@ export function main() {
}); });
it("should create groups with a custom validator", () => { 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", () => { it("should create control arrays", () => {
var c = b.control("three"); 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.value).toEqual(['one', 'two', 'three', ['four']]);
expect(a.validator).toBe(syncValidator);
expect(a.asyncValidator).toBe(asyncValidator);
}); });
}); });
} }