feat(forms): update FormBuilder to support async validations
Closes #5020
This commit is contained in:
parent
31c12af81f
commit
1c322f13e5
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue