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],
|
* 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);
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue