honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(forms): rename Control, ControlGroup, and ControlArray classes

This commit is contained in:
Kara Erickson 2016-06-10 11:15:59 -07:00
parent 97833d48c1
commit b866f32832
21 changed files with 328 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
modules/@angular/common/src/forms.ts
View File

@ -1,9 +1,10 @@
/**
* @module
* @description
* This module is used for handling user input, by defining and building a {@link ControlGroup} that
* This module is used for handling user input, by defining and building a {@link FormGroup} that
* consists of
* {@link Control} objects, and mapping them onto the DOM. {@link Control} objects can then be used
* {@link FormControl} objects, and mapping them onto the DOM. {@link FormControl} objects can then
* be used
* to read information
* from the form DOM elements.
*
@ -33,10 +34,11 @@ export {NgModel} from './forms/directives/ng_model';
export {NgSelectOption, SelectControlValueAccessor} from './forms/directives/select_control_value_accessor';
export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator} from './forms/directives/validators';
export {FormBuilder} from './forms/form_builder';
export {AbstractControl, Control, ControlArray, ControlGroup} from './forms/model';
export {AbstractControl, FormArray, FormControl, FormGroup} from './forms/model';
export {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from './forms/validators';
/**
* Shorthand set of providers used for building Angular forms.
*

14
modules/@angular/common/src/forms/directives/form_interface.ts
View File

@ -1,4 +1,4 @@
import {Control, ControlGroup} from '../model';
import {FormControl, FormGroup} from '../model';
import {NgControl} from './ng_control';
import {NgControlGroup} from './ng_control_group';
@ -15,7 +15,7 @@ export interface Form {
/**
* Add a control to this form.
*/
addControl(dir: NgControl): Control;
addControl(dir: NgControl): FormControl;
/**
* Remove a control from this form.
@ -25,22 +25,22 @@ export interface Form {
/**
* Look up the {@link Control} associated with a particular {@link NgControl}.
*/
getControl(dir: NgControl): Control;
getControl(dir: NgControl): FormControl;
/**
* Add a group of controls to this form.
*/
addControlGroup(dir: NgControlGroup): void;
addFormGroup(dir: NgControlGroup): void;
/**
* Remove a group of controls from this form.
*/
removeControlGroup(dir: NgControlGroup): void;
removeFormGroup(dir: NgControlGroup): void;
/**
* Look up the {@link ControlGroup} associated with a particular {@link NgControlGroup}.
* Look up the {@link FormGroup} associated with a particular {@link NgControlGroup}.
*/
getControlGroup(dir: NgControlGroup): ControlGroup;
getFormGroup(dir: NgControlGroup): FormGroup;
/**
* Update the model for a particular control with a new value.

12
modules/@angular/common/src/forms/directives/ng_control_group.ts
View File

@ -1,6 +1,6 @@
import {Directive, Host, Inject, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core';
import {ControlGroup} from '../model';
import {FormGroup} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
import {ControlContainer} from './control_container';
@ -26,7 +26,7 @@ export const controlGroupProvider: any =
* selector: 'my-app',
* template: `
* <div>
* <h2>Angular Control &amp; ControlGroup Example</h2>
* <h2>Angular FormControl &amp; FormGroup Example</h2>
* <form #f="ngForm">
* <div ngControlGroup="name" #cgName="ngForm">
* <h3>Enter your name:</h3>
@ -79,14 +79,14 @@ export class NgControlGroup extends ControlContainer implements OnInit,
this._parent = parent;
}
ngOnInit(): void { this.formDirective.addControlGroup(this); }
ngOnInit(): void { this.formDirective.addFormGroup(this); }
ngOnDestroy(): void { this.formDirective.removeControlGroup(this); }
ngOnDestroy(): void { this.formDirective.removeFormGroup(this); }
/**
* Get the {@link ControlGroup} backing this binding.
* Get the {@link FormGroup} backing this binding.
*/
get control(): ControlGroup { return this.formDirective.getControlGroup(this); }
get control(): FormGroup { return this.formDirective.getFormGroup(this); }
/**
* Get the path to this control group.

4
modules/@angular/common/src/forms/directives/ng_control_name.ts
View File

@ -1,7 +1,7 @@
import {Directive, Host, Inject, OnChanges, OnDestroy, Optional, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper} from '../../facade/async';
import {Control} from '../model';
import {FormControl} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
import {ControlContainer} from './control_container';
@ -128,5 +128,5 @@ export class NgControlName extends NgControl implements OnChanges,
return composeAsyncValidators(this._asyncValidators);
}
get control(): Control { return this.formDirective.getControl(this); }
get control(): FormControl { return this.formDirective.getControl(this); }
}

40
modules/@angular/common/src/forms/directives/ng_form.ts
View File

@ -3,14 +3,14 @@ import {Directive, Inject, Optional, Self, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper, PromiseWrapper} from '../../facade/async';
import {ListWrapper} from '../../facade/collection';
import {isPresent} from '../../facade/lang';
import {AbstractControl, Control, ControlGroup} from '../model';
import {AbstractControl, FormControl, FormGroup} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
import {ControlContainer} from './control_container';
import {Form} from './form_interface';
import {NgControl} from './ng_control';
import {NgControlGroup} from './ng_control_group';
import {composeAsyncValidators, composeValidators, setUpControl, setUpControlGroup} from './shared';
import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from './shared';
export const formDirectiveProvider: any =
/*@ts2dart_const*/ {provide: ControlContainer, useExisting: forwardRef(() => NgForm)};
@ -26,9 +26,9 @@ export const formDirectiveProvider: any =
*
* ### Structure
*
* An Angular form is a collection of `Control`s in some hierarchy.
* `Control`s can be at the top level or can be organized in `ControlGroup`s
* or `ControlArray`s. This hierarchy is reflected in the form's `value`, a
* An Angular form is a collection of `FormControl`s in some hierarchy.
* `FormControl`s can be at the top level or can be organized in `FormGroup`s
* or `FormArray`s. This hierarchy is reflected in the form's `value`, a
* JSON object that mirrors the form structure.
*
* ### Submission
@ -88,14 +88,14 @@ export const formDirectiveProvider: any =
export class NgForm extends ControlContainer implements Form {
private _submitted: boolean = false;
form: ControlGroup;
form: FormGroup;
ngSubmit = new EventEmitter();
constructor(
@Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
@Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) {
super();
this.form = new ControlGroup(
this.form = new FormGroup(
{}, null, composeValidators(validators), composeAsyncValidators(asyncValidators));
}
@ -103,14 +103,14 @@ export class NgForm extends ControlContainer implements Form {
get formDirective(): Form { return this; }
get control(): ControlGroup { return this.form; }
get control(): FormGroup { return this.form; }
get path(): string[] { return []; }
get controls(): {[key: string]: AbstractControl} { return this.form.controls; }
addControl(dir: NgControl): Control {
const ctrl = new Control();
addControl(dir: NgControl): FormControl {
const ctrl = new FormControl();
PromiseWrapper.scheduleMicrotask(() => {
const container = this._findContainer(dir.path);
setUpControl(ctrl, dir);
@ -120,7 +120,7 @@ export class NgForm extends ControlContainer implements Form {
return ctrl;
}
getControl(dir: NgControl): Control { return <Control>this.form.find(dir.path); }
getControl(dir: NgControl): FormControl { return <FormControl>this.form.find(dir.path); }
removeControl(dir: NgControl): void {
PromiseWrapper.scheduleMicrotask(() => {
@ -131,17 +131,17 @@ export class NgForm extends ControlContainer implements Form {
});
}
addControlGroup(dir: NgControlGroup): void {
addFormGroup(dir: NgControlGroup): void {
PromiseWrapper.scheduleMicrotask(() => {
var container = this._findContainer(dir.path);
var group = new ControlGroup({});
setUpControlGroup(group, dir);
var group = new FormGroup({});
setUpFormGroup(group, dir);
container.registerControl(dir.name, group);
group.updateValueAndValidity({emitEvent: false});
});
}
removeControlGroup(dir: NgControlGroup): void {
removeFormGroup(dir: NgControlGroup): void {
PromiseWrapper.scheduleMicrotask(() => {
var container = this._findContainer(dir.path);
if (isPresent(container)) {
@ -150,13 +150,11 @@ export class NgForm extends ControlContainer implements Form {
});
}
getControlGroup(dir: NgControlGroup): ControlGroup {
return <ControlGroup>this.form.find(dir.path);
}
getFormGroup(dir: NgControlGroup): FormGroup { return <FormGroup>this.form.find(dir.path); }
updateModel(dir: NgControl, value: any): void {
PromiseWrapper.scheduleMicrotask(() => {
var ctrl = <Control>this.form.find(dir.path);
var ctrl = <FormControl>this.form.find(dir.path);
ctrl.updateValue(value);
});
}
@ -168,8 +166,8 @@ export class NgForm extends ControlContainer implements Form {
}
/** @internal */
_findContainer(path: string[]): ControlGroup {
_findContainer(path: string[]): FormGroup {
path.pop();
return ListWrapper.isEmpty(path) ? this.form : <ControlGroup>this.form.find(path);
return ListWrapper.isEmpty(path) ? this.form : <FormGroup>this.form.find(path);
}
}

6
modules/@angular/common/src/forms/directives/ng_form_control.ts
View File

@ -2,7 +2,7 @@ import {Directive, Inject, OnChanges, Optional, Self, SimpleChanges, forwardRef}
import {EventEmitter, ObservableWrapper} from '../../facade/async';
import {StringMapWrapper} from '../../facade/collection';
import {Control} from '../model';
import {FormControl} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
@ -73,7 +73,7 @@ export const formControlBinding: any =
exportAs: 'ngForm'
})
export class NgFormControl extends NgControl implements OnChanges {
form: Control;
form: FormControl;
update = new EventEmitter();
model: any;
viewModel: any;
@ -107,7 +107,7 @@ export class NgFormControl extends NgControl implements OnChanges {
return composeAsyncValidators(this._asyncValidators);
}
get control(): Control { return this.form; }
get control(): FormControl { return this.form; }
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;

42
modules/@angular/common/src/forms/directives/ng_form_model.ts
View File

@ -4,14 +4,14 @@ import {EventEmitter, ObservableWrapper} from '../../facade/async';
import {ListWrapper, StringMapWrapper} from '../../facade/collection';
import {BaseException} from '../../facade/exceptions';
import {isBlank} from '../../facade/lang';
import {Control, ControlGroup} from '../model';
import {FormControl, FormGroup} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../validators';
import {ControlContainer} from './control_container';
import {Form} from './form_interface';
import {NgControl} from './ng_control';
import {NgControlGroup} from './ng_control_group';
import {composeAsyncValidators, composeValidators, setUpControl, setUpControlGroup} from './shared';
import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from './shared';
export const formDirectiveProvider: any =
/*@ts2dart_const*/ /* @ts2dart_Provider */ {
@ -24,7 +24,7 @@ export const formDirectiveProvider: any =
*
* ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
*
* In this example, we bind the control group to the form element, and we bind the login and
* In this example, we bind the form group to the form element, and we bind the login and
* password controls to the login and password elements.
*
* ```typescript
@ -44,12 +44,12 @@ export const formDirectiveProvider: any =
* directives: [FORM_DIRECTIVES]
* })
* export class App {
* loginForm: ControlGroup;
* loginForm: FormGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* this.loginForm = new FormGroup({
* login: new FormControl(""),
* password: new FormControl("")
* });
* }
*
@ -75,12 +75,12 @@ export const formDirectiveProvider: any =
* })
* class LoginComp {
* credentials: {login: string, password: string};
* loginForm: ControlGroup;
* loginForm: FormGroup;
*
* constructor() {
* this.loginForm = new ControlGroup({
* login: new Control(""),
* password: new Control("")
* this.loginForm = new FormGroup({
* login: new FormControl(""),
* password: new FormControl("")
* });
* }
*
@ -105,7 +105,7 @@ export class NgFormModel extends ControlContainer implements Form,
OnChanges {
private _submitted: boolean = false;
form: ControlGroup = null;
form: FormGroup = null;
directives: NgControl[] = [];
ngSubmit = new EventEmitter();
@ -134,11 +134,11 @@ export class NgFormModel extends ControlContainer implements Form,
get formDirective(): Form { return this; }
get control(): ControlGroup { return this.form; }
get control(): FormGroup { return this.form; }
get path(): string[] { return []; }
addControl(dir: NgControl): Control {
addControl(dir: NgControl): FormControl {
const ctrl: any = this.form.find(dir.path);
setUpControl(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
@ -146,24 +146,22 @@ export class NgFormModel extends ControlContainer implements Form,
return ctrl;
}
getControl(dir: NgControl): Control { return <Control>this.form.find(dir.path); }
getControl(dir: NgControl): FormControl { return <FormControl>this.form.find(dir.path); }
removeControl(dir: NgControl): void { ListWrapper.remove(this.directives, dir); }
addControlGroup(dir: NgControlGroup) {
addFormGroup(dir: NgControlGroup) {
var ctrl: any = this.form.find(dir.path);
setUpControlGroup(ctrl, dir);
setUpFormGroup(ctrl, dir);
ctrl.updateValueAndValidity({emitEvent: false});
}
removeControlGroup(dir: NgControlGroup) {}
removeFormGroup(dir: NgControlGroup) {}
getControlGroup(dir: NgControlGroup): ControlGroup {
return <ControlGroup>this.form.find(dir.path);
}
getFormGroup(dir: NgControlGroup): FormGroup { return <FormGroup>this.form.find(dir.path); }
updateModel(dir: NgControl, value: any): void {
var ctrl  = <Control>this.form.find(dir.path);
var ctrl  = <FormControl>this.form.find(dir.path);
ctrl.updateValue(value);
}

10
modules/@angular/common/src/forms/directives/ng_model.ts
View File

@ -2,7 +2,7 @@ import {Directive, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output,
import {EventEmitter, ObservableWrapper} from '../../facade/async';
import {BaseException} from '../../facade/exceptions';
import {Control} from '../model';
import {FormControl} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
import {ControlContainer} from './control_container';
@ -48,7 +48,7 @@ export const formControlBinding: any =
export class NgModel extends NgControl implements OnChanges,
OnDestroy {
/** @internal */
_control: Control;
_control: FormControl;
/** @internal */
_added = false;
viewModel: any;
@ -65,7 +65,7 @@ export class NgModel extends NgControl implements OnChanges,
valueAccessors: ControlValueAccessor[]) {
super();
this.valueAccessor = selectValueAccessor(this, valueAccessors);
if (!this._parent) this._control = new Control();
if (!this._parent) this._control = new FormControl();
}
ngOnChanges(changes: SimpleChanges) {
@ -80,7 +80,7 @@ export class NgModel extends NgControl implements OnChanges,
ngOnDestroy(): void { this.formDirective && this.formDirective.removeControl(this); }
get control(): Control { return this._control; }
get control(): FormControl { return this._control; }
get path(): string[] {
return this._parent ? controlPath(this.name, this._parent) : [];
@ -105,7 +105,7 @@ export class NgModel extends NgControl implements OnChanges,
this._added = true;
}
private _addStandaloneControl(): Control {
private _addStandaloneControl(): FormControl {
setUpControl(this._control, this);
this._control.updateValueAndValidity({emitEvent: false});
return this._control;

6
modules/@angular/common/src/forms/directives/shared.ts
View File

@ -1,7 +1,7 @@
import {ListWrapper, StringMapWrapper} from '../../facade/collection';
import {BaseException} from '../../facade/exceptions';
import {hasConstructor, isBlank, isPresent, looseIdentical} from '../../facade/lang';
import {Control, ControlGroup} from '../model';
import {FormControl, FormGroup} from '../model';
import {Validators} from '../validators';
import {AbstractControlDirective} from './abstract_control_directive';
@ -24,7 +24,7 @@ export function controlPath(name: string, parent: ControlContainer): string[] {
return p;
}
export function setUpControl(control: Control, dir: NgControl): void {
export function setUpControl(control: FormControl, dir: NgControl): void {
if (isBlank(control)) _throwError(dir, 'Cannot find control');
if (isBlank(dir.valueAccessor)) _throwError(dir, 'No value accessor for');
@ -46,7 +46,7 @@ export function setUpControl(control: Control, dir: NgControl): void {
dir.valueAccessor.registerOnTouched(() => control.markAsTouched());
}
export function setUpControlGroup(control: ControlGroup, dir: NgControlGroup) {
export function setUpFormGroup(control: FormGroup, dir: NgControlGroup) {
if (isBlank(control)) _throwError(dir, 'Cannot find control');
control.validator = Validators.compose([control.validator, dir.validator]);
control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);

28
modules/@angular/common/src/forms/form_builder.ts
View File

@ -31,7 +31,7 @@ import * as modelModule from './model';
* directives: [FORM_DIRECTIVES]
* })
* export class App {
* loginForm: ControlGroup;
* loginForm: FormGroup;
*
* constructor(builder: FormBuilder) {
* this.loginForm = builder.group({
@ -54,38 +54,38 @@ import * as modelModule from './model';
@Injectable()
export class FormBuilder {
/**
* Construct a new {@link ControlGroup} with the given map of configuration.
* Construct a new {@link FormGroup} with the given map of configuration.
* Valid keys for the `extra` parameter map are `optionals` and `validator`.
*
* See the {@link ControlGroup} constructor for more details.
* See the {@link FormGroup} constructor for more details.
*/
group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null):
modelModule.ControlGroup {
modelModule.FormGroup {
var controls = this._reduceControls(controlsConfig);
var optionals = <{[key: string]: boolean}>(
isPresent(extra) ? StringMapWrapper.get(extra, 'optionals') : null);
var validator: ValidatorFn = isPresent(extra) ? StringMapWrapper.get(extra, 'validator') : null;
var asyncValidator: AsyncValidatorFn =
isPresent(extra) ? StringMapWrapper.get(extra, 'asyncValidator') : null;
return new modelModule.ControlGroup(controls, optionals, validator, asyncValidator);
return new modelModule.FormGroup(controls, optionals, validator, asyncValidator);
}
/**
* Construct a new {@link Control} with the given `value`,`validator`, and `asyncValidator`.
* Construct a new {@link FormControl} with the given `value`,`validator`, and `asyncValidator`.
*/
control(value: Object, validator: ValidatorFn = null, asyncValidator: AsyncValidatorFn = null):
modelModule.Control {
return new modelModule.Control(value, validator, asyncValidator);
modelModule.FormControl {
return new modelModule.FormControl(value, validator, asyncValidator);
}
/**
* Construct an array of {@link Control}s from the given `controlsConfig` array of
* Construct an array of {@link FormControl}s from the given `controlsConfig` array of
* configuration, with the given optional `validator` and `asyncValidator`.
*/
array(
controlsConfig: any[], validator: ValidatorFn = null,
asyncValidator: AsyncValidatorFn = null): modelModule.ControlArray {
asyncValidator: AsyncValidatorFn = null): modelModule.FormArray {
var controls = controlsConfig.map(c => this._createControl(c));
return new modelModule.ControlArray(controls, validator, asyncValidator);
return new modelModule.FormArray(controls, validator, asyncValidator);
}
/** @internal */
@ -100,9 +100,9 @@ export class FormBuilder {
/** @internal */
_createControl(controlConfig: any): modelModule.AbstractControl {
if (controlConfig instanceof modelModule.Control ||
controlConfig instanceof modelModule.ControlGroup ||
controlConfig instanceof modelModule.ControlArray) {
if (controlConfig instanceof modelModule.FormControl ||
controlConfig instanceof modelModule.FormGroup ||
controlConfig instanceof modelModule.FormArray) {
return controlConfig;
} else if (isArray(controlConfig)) {

64
modules/@angular/common/src/forms/model.ts
View File

@ -7,17 +7,17 @@ import {AsyncValidatorFn, ValidatorFn} from './directives/validators';
/**
* Indicates that a Control is valid, i.e. that no errors exist in the input value.
* Indicates that a FormControl is valid, i.e. that no errors exist in the input value.
*/
export const VALID = 'VALID';
/**
* Indicates that a Control is invalid, i.e. that an error exists in the input value.
* Indicates that a FormControl is invalid, i.e. that an error exists in the input value.
*/
export const INVALID = 'INVALID';
/**
* Indicates that a Control is pending, i.e. that async validation is occurring and
* Indicates that a FormControl is pending, i.e. that async validation is occurring and
* errors are not yet available for the input value.
*/
export const PENDING = 'PENDING';
@ -35,9 +35,9 @@ function _find(control: AbstractControl, path: Array<string|number>| string) {
if (path instanceof Array && ListWrapper.isEmpty(path)) return null;
return (<Array<string|number>>path).reduce((v, name) => {
if (v instanceof ControlGroup) {
if (v instanceof FormGroup) {
return isPresent(v.controls[name]) ? v.controls[name] : null;
} else if (v instanceof ControlArray) {
} else if (v instanceof FormArray) {
var index = <number>name;
return isPresent(v.at(index)) ? v.at(index) : null;
} else {
@ -63,7 +63,7 @@ export abstract class AbstractControl {
private _errors: {[key: string]: any};
private _pristine: boolean = true;
private _touched: boolean = false;
private _parent: ControlGroup|ControlArray;
private _parent: FormGroup|FormArray;
private _asyncValidationSubscription: any;
constructor(public validator: ValidatorFn, public asyncValidator: AsyncValidatorFn) {}
@ -113,7 +113,7 @@ export abstract class AbstractControl {
}
}
setParent(parent: ControlGroup|ControlArray): void { this._parent = parent; }
setParent(parent: FormGroup|FormArray): void { this._parent = parent; }
updateValueAndValidity({onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}):
void {
@ -160,7 +160,7 @@ export abstract class AbstractControl {
}
/**
* Sets errors on a control.
* Sets errors on a form control.
*
* This is used when validations are run not automatically, but manually by the user.
*
@ -169,7 +169,7 @@ export abstract class AbstractControl {
* ## Usage
*
* ```
* var login = new Control("someLogin");
* var login = new FormControl("someLogin");
* login.setErrors({
* "notUnique": true
* });
@ -253,24 +253,26 @@ export abstract class AbstractControl {
}
/**
* Defines a part of a form that cannot be divided into other controls. `Control`s have values and
* Defines a part of a form that cannot be divided into other controls. `FormControl`s have values
* and
* validation state, which is determined by an optional validation function.
*
* `Control` is one of the three fundamental building blocks used to define forms in Angular, along
* with {@link ControlGroup} and {@link ControlArray}.
* `FormControl` is one of the three fundamental building blocks used to define forms in Angular,
* along
* with {@link FormGroup} and {@link FormArray}.
*
* ## Usage
*
* By default, a `Control` is created for every `<input>` or other form component.
* With {@link NgFormControl} or {@link NgFormModel} an existing {@link Control} can be
* bound to a DOM element instead. This `Control` can be configured with a custom
* By default, a `FormControl` is created for every `<input>` or other form component.
* With {@link NgFormControl} or {@link NgFormModel} an existing {@link FormControl} can be
* bound to a DOM element instead. This `FormControl` can be configured with a custom
* validation function.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*
* @experimental
*/
export class Control extends AbstractControl {
export class FormControl extends AbstractControl {
/** @internal */
_onChange: Function;
@ -283,11 +285,11 @@ export class Control extends AbstractControl {
}
/**
* Set the value of the control to `value`.
* Set the value of the form control to `value`.
*
* If `onlySelf` is `true`, this change will only affect the validation of this `Control`
* If `onlySelf` is `true`, this change will only affect the validation of this `FormControl`
* and not its parent component. If `emitEvent` is `true`, this change will cause a
* `valueChanges` event on the `Control` to be emitted. Both of these options default to
* `valueChanges` event on the `FormControl` to be emitted. Both of these options default to
* `false`.
*
* If `emitModelToViewChange` is `true`, the view will be notified about the new value
@ -324,20 +326,20 @@ export class Control extends AbstractControl {
/**
* Defines a part of a form, of fixed length, that can contain other controls.
*
* A `ControlGroup` aggregates the values of each {@link Control} in the group.
* The status of a `ControlGroup` depends on the status of its children.
* A `FormGroup` aggregates the values of each {@link FormControl} in the group.
* The status of a `FormGroup` depends on the status of its children.
* If one of the controls in a group is invalid, the entire group is invalid.
* Similarly, if a control changes its value, the entire group changes as well.
*
* `ControlGroup` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link Control} and {@link ControlArray}. {@link ControlArray} can also contain other
* `FormGroup` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link FormControl} and {@link FormArray}. {@link FormArray} can also contain other
* controls, but is of variable length.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*
* @experimental
*/
export class ControlGroup extends AbstractControl {
export class FormGroup extends AbstractControl {
private _optionals: {[key: string]: boolean};
constructor(
@ -446,28 +448,28 @@ export class ControlGroup extends AbstractControl {
/**
* Defines a part of a form, of variable length, that can contain other controls.
*
* A `ControlArray` aggregates the values of each {@link Control} in the group.
* The status of a `ControlArray` depends on the status of its children.
* A `FormArray` aggregates the values of each {@link FormControl} in the group.
* The status of a `FormArray` depends on the status of its children.
* If one of the controls in a group is invalid, the entire array is invalid.
* Similarly, if a control changes its value, the entire array changes as well.
*
* `ControlArray` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link Control} and {@link ControlGroup}. {@link ControlGroup} can also contain
* `FormArray` is one of the three fundamental building blocks used to define forms in Angular,
* along with {@link FormControl} and {@link FormGroup}. {@link FormGroup} can also contain
* other controls, but is of fixed length.
*
* ## Adding or removing controls
*
* To change the controls in the array, use the `push`, `insert`, or `removeAt` methods
* in `ControlArray` itself. These methods ensure the controls are properly tracked in the
* in `FormArray` itself. These methods ensure the controls are properly tracked in the
* form's hierarchy. Do not modify the array of `AbstractControl`s used to instantiate
* the `ControlArray` directly, as that will result in strange and unexpected behavior such
* the `FormArray` directly, as that will result in strange and unexpected behavior such
* as broken change detection.
*
* ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
*
* @experimental
*/
export class ControlArray extends AbstractControl {
export class FormArray extends AbstractControl {
constructor(
public controls: AbstractControl[], validator: ValidatorFn = null,
asyncValidator: AsyncValidatorFn = null) {

8
modules/@angular/common/src/forms/validators.ts
View File

@ -10,7 +10,7 @@ import * as modelModule from './model';
/**
* Providers for validators to be used for {@link Control}s in a form.
* Providers for validators to be used for {@link FormControl}s in a form.
*
* Provide this using `multi: true` to add validators.
*
@ -22,7 +22,7 @@ import * as modelModule from './model';
export const NG_VALIDATORS: OpaqueToken = /*@ts2dart_const*/ new OpaqueToken('NgValidators');
/**
* Providers for asynchronous validators to be used for {@link Control}s
* Providers for asynchronous validators to be used for {@link FormControl}s
* in a form.
*
* Provide this using `multi: true` to add validators.
@ -37,13 +37,13 @@ export const NG_ASYNC_VALIDATORS: OpaqueToken =
/**
* Provides a set of validators used by form controls.
*
* A validator is a function that processes a {@link Control} or collection of
* A validator is a function that processes a {@link FormControl} or collection of
* controls and returns a map of errors. A null map means that validation has passed.
*
* ### Example
*
* ```typescript
* var loginControl = new Control("", Validators.required)
* var loginControl = new FormControl("", Validators.required)
* ```
*
* @experimental

2
modules/@angular/common/test/forms-deprecated/form_builder_spec.ts
View File

@ -1,4 +1,4 @@
import {Control, FormBuilder} from '@angular/common';
import {Control, FormBuilder} from '@angular/common/src/forms-deprecated';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';
import {PromiseWrapper} from '../../src/facade/promise';

6
modules/@angular/common/test/forms-deprecated/integration_spec.ts
View File

@ -1,4 +1,5 @@
import {Control, ControlGroup, ControlValueAccessor, FORM_DIRECTIVES, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgFor, NgForm, NgIf, RadioButtonState, Validator, Validators} from '@angular/common';
import {NgFor, NgIf} from '@angular/common';
import {Control, ControlGroup, ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, RadioButtonState, Validator, Validators} from '@angular/common/src/forms-deprecated';
import {TestComponentBuilder} from '@angular/compiler/testing';
import {ComponentFixture} from '@angular/compiler/testing';
import {Component, Directive, EventEmitter, Output} from '@angular/core';
@ -1542,7 +1543,8 @@ class UniqLoginValidator implements Validator {
template: '',
directives: [
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator
]
],
providers: [FORM_PROVIDERS]
})
class MyComp8 {
form: any;

2
modules/@angular/common/test/forms-deprecated/model_spec.ts
View File

@ -1,7 +1,7 @@
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, inject,} from '@angular/core/testing/testing_internal';
import {fakeAsync, flushMicrotasks, Log, tick} from '@angular/core/testing';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {ControlGroup, Control, ControlArray, Validators} from '@angular/common';
import {ControlGroup, Control, ControlArray, Validators} from '@angular/common/src/forms-deprecated';
import {IS_DART, isPresent} from '../../src/facade/lang';
import {PromiseWrapper} from '../../src/facade/promise';
import {TimerWrapper, ObservableWrapper, EventEmitter} from '../../src/facade/async';

2
modules/@angular/common/test/forms-deprecated/validators_spec.ts
View File

@ -1,4 +1,4 @@
import {AbstractControl, Control, ControlArray, ControlGroup, Validators} from '@angular/common';
import {AbstractControl, Control, ControlArray, ControlGroup, Validators} from '@angular/common/src/forms-deprecated';
import {Log, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';

58
modules/@angular/common/test/forms/directives_spec.ts
View File

@ -4,7 +4,7 @@ import {fakeAsync, flushMicrotasks, Log, tick,} from '@angular/core/testing';
import {SpyNgControl, SpyValueAccessor} from '../spies';
import {ControlGroup, Control, NgControlName, NgControlGroup, NgFormModel, ControlValueAccessor, Validators, NgForm, NgModel, NgFormControl, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
import {FormGroup, FormControl, NgControlName, NgControlGroup, NgFormModel, ControlValueAccessor, Validators, NgForm, NgModel, NgFormControl, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
import {selectValueAccessor, composeValidators} from '@angular/common/src/forms/directives/shared';
@ -22,7 +22,7 @@ class DummyControlValueAccessor implements ControlValueAccessor {
}
class CustomValidatorDirective implements Validator {
validate(c: Control): {[key: string]: any} { return {'custom': true}; }
validate(c: FormControl): {[key: string]: any} { return {'custom': true}; }
}
function asyncValidator(expected: any /** TODO #9100 */, timeout = 0) {
@ -94,28 +94,28 @@ export function main() {
var dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
var dummy2 = (_: any /** TODO #9100 */) => ({'dummy2': true});
var v = composeValidators([dummy1, dummy2]);
expect(v(new Control(''))).toEqual({'dummy1': true, 'dummy2': true});
expect(v(new FormControl(''))).toEqual({'dummy1': true, 'dummy2': true});
});
it('should compose validator directives', () => {
var dummy1 = (_: any /** TODO #9100 */) => ({'dummy1': true});
var v = composeValidators([dummy1, new CustomValidatorDirective()]);
expect(v(new Control(''))).toEqual({'dummy1': true, 'custom': true});
expect(v(new FormControl(''))).toEqual({'dummy1': true, 'custom': true});
});
});
});
describe('NgFormModel', () => {
var form: any /** TODO #9100 */;
var formModel: ControlGroup;
var formModel: FormGroup;
var loginControlDir: any /** TODO #9100 */;
beforeEach(() => {
form = new NgFormModel([], []);
formModel = new ControlGroup({
'login': new Control(),
'passwords':
new ControlGroup({'password': new Control(), 'passwordConfirm': new Control()})
formModel = new FormGroup({
'login': new FormControl(),
'passwords': new FormGroup(
{'password': new FormControl(), 'passwordConfirm': new FormControl()})
});
form.form = formModel;
@ -160,7 +160,7 @@ export function main() {
expect(formModel.hasError('required', ['login'])).toBe(true);
expect(formModel.hasError('async', ['login'])).toBe(false);
(<Control>formModel.find(['login'])).updateValue('invalid value');
(<FormControl>formModel.find(['login'])).updateValue('invalid value');
// sync validator passes, running async validators
expect(formModel.pending).toBe(true);
@ -172,7 +172,7 @@ export function main() {
}));
it('should write value to the DOM', () => {
(<Control>formModel.find(['login'])).updateValue('initValue');
(<FormControl>formModel.find(['login'])).updateValue('initValue');
form.addControl(loginControlDir);
@ -185,7 +185,7 @@ export function main() {
});
});
describe('addControlGroup', () => {
describe('addFormGroup', () => {
var matchingPasswordsValidator = (g: any /** TODO #9100 */) => {
if (g.controls['password'].value != g.controls['passwordConfirm'].value) {
return {'differentPasswords': true};
@ -198,17 +198,17 @@ export function main() {
var group = new NgControlGroup(
form, [matchingPasswordsValidator], [asyncValidator('expected')]);
group.name = 'passwords';
form.addControlGroup(group);
form.addFormGroup(group);
(<Control>formModel.find(['passwords', 'password'])).updateValue('somePassword');
(<Control>formModel.find([
(<FormControl>formModel.find(['passwords', 'password'])).updateValue('somePassword');
(<FormControl>formModel.find([
'passwords', 'passwordConfirm'
])).updateValue('someOtherPassword');
// sync validators are set
expect(formModel.hasError('differentPasswords', ['passwords'])).toEqual(true);
(<Control>formModel.find([
(<FormControl>formModel.find([
'passwords', 'passwordConfirm'
])).updateValue('somePassword');
@ -233,7 +233,7 @@ export function main() {
it('should update dom values of all the directives', () => {
form.addControl(loginControlDir);
(<Control>formModel.find(['login'])).updateValue('new value');
(<FormControl>formModel.find(['login'])).updateValue('new value');
form.ngOnChanges({});
@ -263,7 +263,7 @@ export function main() {
describe('NgForm', () => {
var form: any /** TODO #9100 */;
var formModel: ControlGroup;
var formModel: FormGroup;
var loginControlDir: any /** TODO #9100 */;
var personControlGroupDir: any /** TODO #9100 */;
@ -290,9 +290,9 @@ export function main() {
expect(form.untouched).toBe(formModel.untouched);
});
describe('addControl & addControlGroup', () => {
describe('addControl & addFormGroup', () => {
it('should create a control with the given name', fakeAsync(() => {
form.addControlGroup(personControlGroupDir);
form.addFormGroup(personControlGroupDir);
form.addControl(loginControlDir);
flushMicrotasks();
@ -303,12 +303,12 @@ export function main() {
// should update the form's value and validity
});
describe('removeControl & removeControlGroup', () => {
describe('removeControl & removeFormGroup', () => {
it('should remove control', fakeAsync(() => {
form.addControlGroup(personControlGroupDir);
form.addFormGroup(personControlGroupDir);
form.addControl(loginControlDir);
form.removeControlGroup(personControlGroupDir);
form.removeFormGroup(personControlGroupDir);
form.removeControl(loginControlDir);
flushMicrotasks();
@ -343,10 +343,10 @@ export function main() {
var controlGroupDir: any /** TODO #9100 */;
beforeEach(() => {
formModel = new ControlGroup({'login': new Control(null)});
formModel = new FormGroup({'login': new FormControl(null)});
var parent = new NgFormModel([], []);
parent.form = new ControlGroup({'group': formModel});
parent.form = new FormGroup({'group': formModel});
controlGroupDir = new NgControlGroup(parent, [], []);
controlGroupDir.name = 'group';
});
@ -381,14 +381,14 @@ export function main() {
controlDir = new NgFormControl([Validators.required], [], [defaultAccessor]);
controlDir.valueAccessor = new DummyControlValueAccessor();
control = new Control(null);
control = new FormControl(null);
controlDir.form = control;
});
it('should reexport control properties', () => { checkProperties(control); });
it('should reexport new control properties', () => {
var newControl = new Control(null);
var newControl = new FormControl(null);
controlDir.form = newControl;
controlDir.ngOnChanges({'form': new SimpleChange(control, newControl)});
@ -445,10 +445,10 @@ export function main() {
var controlNameDir: any /** TODO #9100 */;
beforeEach(() => {
formModel = new Control('name');
formModel = new FormControl('name');
var parent = new NgFormModel([], []);
parent.form = new ControlGroup({'name': formModel});
parent.form = new FormGroup({'name': formModel});
controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]);
controlNameDir.name = 'name';
});

2
modules/@angular/common/test/forms/form_builder_spec.ts
View File

@ -1,4 +1,4 @@
import {Control, FormBuilder} from '@angular/common';
import {FormBuilder, FormControl} from '@angular/common/src/forms';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';
import {PromiseWrapper} from '../../src/facade/promise';

86
modules/@angular/common/test/forms/integration_spec.ts
View File

@ -1,5 +1,5 @@
import {NgFor, NgIf} from '@angular/common';
import {Control, ControlGroup, ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
import {TestComponentBuilder} from '@angular/compiler/testing';
import {ComponentFixture} from '@angular/compiler/testing';
import {Component, Directive, EventEmitter, Output} from '@angular/core';
@ -28,7 +28,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'login': new Control('loginValue')});
new FormGroup({'login': new FormControl('loginValue')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -56,7 +56,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'login': new Control('oldValue')});
var form = new FormGroup({'login': new FormControl('oldValue')});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login">
@ -79,7 +79,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'login': new Control('oldValue')});
var form = new FormGroup({'login': new FormControl('oldValue')});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login">
@ -110,7 +110,7 @@ export function main() {
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
fixture.debugElement.componentInstance.form = new ControlGroup({});
fixture.debugElement.componentInstance.form = new FormGroup({});
fixture.debugElement.componentInstance.name = 'old';
tick();
@ -161,7 +161,7 @@ export function main() {
});
tick();
fixture.debugElement.componentInstance.form = new ControlGroup({});
fixture.debugElement.componentInstance.form = new FormGroup({});
fixture.debugElement.componentInstance.data = false;
tick();
@ -177,7 +177,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var control = new Control('loginValue');
var control = new FormControl('loginValue');
var t = `<div><input type="text" [ngFormControl]="form"></div>`;
@ -206,11 +206,11 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'login': new Control('oldValue')});
new FormGroup({'login': new FormControl('oldValue')});
fixture.detectChanges();
fixture.debugElement.componentInstance.form =
new ControlGroup({'login': new Control('newValue')});
new FormGroup({'login': new FormControl('newValue')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -223,8 +223,8 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var login = new Control('oldValue');
var form = new ControlGroup({'login': login});
var login = new FormControl('oldValue');
var form = new FormGroup({'login': login});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login">
@ -248,8 +248,8 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var login = new Control('oldValue');
var form = new ControlGroup({'login': login});
var login = new FormControl('oldValue');
var form = new FormGroup({'login': login});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login">
@ -281,7 +281,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'text': new Control('old')});
new FormGroup({'text': new FormControl('old')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -305,7 +305,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'text': new Control('old')});
new FormGroup({'text': new FormControl('old')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('old');
@ -328,7 +328,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'text': new Control('old')});
new FormGroup({'text': new FormControl('old')});
fixture.detectChanges();
var textarea = fixture.debugElement.query(By.css('textarea'));
@ -352,7 +352,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'checkbox': new Control(true)});
new FormGroup({'checkbox': new FormControl(true)});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -378,7 +378,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'num': new Control(10)});
new FormGroup({'num': new FormControl(10)});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -402,7 +402,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'num': new Control(10)});
new FormGroup({'num': new FormControl(10)});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -426,7 +426,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'num': new Control(10)});
var form = new FormGroup({'num': new FormControl(10)});
var t = `<div [ngFormModel]="form">
<input type="number" ngControl="num" [(ngModel)]="data">
</div>`;
@ -453,9 +453,9 @@ export function main() {
</form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = new ControlGroup({
'foodChicken': new Control(new RadioButtonState(false, 'chicken')),
'foodFish': new Control(new RadioButtonState(true, 'fish'))
fixture.debugElement.componentInstance.form = new FormGroup({
'foodChicken': new FormControl(new RadioButtonState(false, 'chicken')),
'foodFish': new FormControl(new RadioButtonState(true, 'fish'))
});
fixture.detectChanges();
@ -532,7 +532,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'city': new Control('SF')});
new FormGroup({'city': new FormControl('SF')});
fixture.detectChanges();
var select = fixture.debugElement.query(By.css('select'));
@ -568,7 +568,7 @@ export function main() {
tick();
fixture.debugElement.componentInstance.form =
new ControlGroup({'city': new Control('NYC')});
new FormGroup({'city': new FormControl('NYC')});
fixture.debugElement.componentInstance.data = ['SF', 'NYC'];
fixture.detectChanges();
@ -800,7 +800,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'name': new Control('aa')});
new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.value).toEqual('!aa!');
@ -824,7 +824,7 @@ export function main() {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new ControlGroup({'name': new Control('aa')});
new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('my-input'));
expect(input.componentInstance.value).toEqual('!aa!');
@ -847,8 +847,11 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup(
{'login': new Control(''), 'min': new Control(''), 'max': new Control('')});
var form = new FormGroup({
'login': new FormControl(''),
'min': new FormControl(''),
'max': new FormControl('')
});
var t = `<div [ngFormModel]="form" login-is-empty-validator>
<input type="text" ngControl="login" required>
@ -892,7 +895,7 @@ export function main() {
it('should use async validators defined in the html',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new ControlGroup({'login': new Control('')});
var form = new FormGroup({'login': new FormControl('')});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login" uniq-login-validator="expected">
@ -923,7 +926,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'login': new Control('aa', Validators.required)});
var form = new FormGroup({'login': new FormControl('aa', Validators.required)});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login">
@ -946,8 +949,9 @@ export function main() {
it('should use async validators defined in the model',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var control = new Control('', Validators.required, uniqLoginAsyncValidator('expected'));
var form = new ControlGroup({'login': control});
var control =
new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
var form = new FormGroup({'login': control});
var t = `<div [ngFormModel]="form">
<input type="text" ngControl="login">
@ -985,7 +989,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form =
new ControlGroup({'nested': new ControlGroup({'login': new Control('value')})});
new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
var t = `<div [ngFormModel]="form">
<div ngControlGroup="nested">
@ -1008,7 +1012,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form =
new ControlGroup({'nested': new ControlGroup({'login': new Control('value')})});
new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
var t = `<div [ngFormModel]="form">
<div ngControlGroup="nested">
@ -1032,7 +1036,7 @@ export function main() {
it('should support ngModel for complex forms',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new ControlGroup({'name': new Control('')});
var form = new FormGroup({'name': new FormControl('')});
var t =
`<div [ngFormModel]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
@ -1056,7 +1060,7 @@ export function main() {
it('should support ngModel for single fields',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new Control('');
var form = new FormControl('');
var t = `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
@ -1335,7 +1339,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new Control('', Validators.required);
var form = new FormControl('', Validators.required);
var t = `<div><input type="text" [ngFormControl]="form"></div>`;
@ -1368,7 +1372,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new ControlGroup({'name': new Control('', Validators.required)});
var form = new FormGroup({'name': new FormControl('', Validators.required)});
var t = `<form [ngFormModel]="form"><input type="text" ngControl="name"></form>`;
@ -1432,7 +1436,7 @@ export function main() {
describe('ngModel corner cases', () => {
it('should not update the view when the value initially came from the view',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new Control('');
var form = new FormControl('');
var t = `<div><input type="text" [ngFormControl]="form" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
@ -1544,7 +1548,7 @@ function uniqLoginAsyncValidator(expectedValue: string) {
};
}
function loginIsEmptyGroupValidator(c: ControlGroup) {
function loginIsEmptyGroupValidator(c: FormGroup) {
return c.controls['login'].value == '' ? {'loginIsEmpty': true} : null;
}

191
modules/@angular/common/test/forms/model_spec.ts
View File

@ -1,7 +1,7 @@
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, inject,} from '@angular/core/testing/testing_internal';
import {fakeAsync, flushMicrotasks, Log, tick} from '@angular/core/testing';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {ControlGroup, Control, ControlArray, Validators} from '@angular/common';
import {FormGroup, FormControl, FormArray, Validators} from '@angular/common/src/forms';
import {IS_DART, isPresent} from '../../src/facade/lang';
import {PromiseWrapper} from '../../src/facade/promise';
import {TimerWrapper, ObservableWrapper, EventEmitter} from '../../src/facade/async';
@ -32,33 +32,33 @@ export function main() {
}
describe('Form Model', () => {
describe('Control', () => {
describe('FormControl', () => {
it('should default the value to null', () => {
var c = new Control();
var c = new FormControl();
expect(c.value).toBe(null);
});
describe('validator', () => {
it('should run validator with the initial value', () => {
var c = new Control('value', Validators.required);
var c = new FormControl('value', Validators.required);
expect(c.valid).toEqual(true);
});
it('should rerun the validator when the value changes', () => {
var c = new Control('value', Validators.required);
var c = new FormControl('value', Validators.required);
c.updateValue(null);
expect(c.valid).toEqual(false);
});
it('should return errors', () => {
var c = new Control(null, Validators.required);
var c = new FormControl(null, Validators.required);
expect(c.errors).toEqual({'required': true});
});
});
describe('asyncValidator', () => {
it('should run validator with the initial value', fakeAsync(() => {
var c = new Control('value', null, asyncValidator('expected'));
var c = new FormControl('value', null, asyncValidator('expected'));
tick();
expect(c.valid).toEqual(false);
@ -66,7 +66,7 @@ export function main() {
}));
it('should support validators returning observables', fakeAsync(() => {
var c = new Control('value', null, asyncValidatorReturningObservable);
var c = new FormControl('value', null, asyncValidatorReturningObservable);
tick();
expect(c.valid).toEqual(false);
@ -74,7 +74,7 @@ export function main() {
}));
it('should rerun the validator when the value changes', fakeAsync(() => {
var c = new Control('value', null, asyncValidator('expected'));
var c = new FormControl('value', null, asyncValidator('expected'));
c.updateValue('expected');
tick();
@ -83,7 +83,7 @@ export function main() {
}));
it('should run the async validator only when the sync validator passes', fakeAsync(() => {
var c = new Control('', Validators.required, asyncValidator('expected'));
var c = new FormControl('', Validators.required, asyncValidator('expected'));
tick();
expect(c.errors).toEqual({'required': true});
@ -96,7 +96,7 @@ export function main() {
it('should mark the control as pending while running the async validation',
fakeAsync(() => {
var c = new Control('', null, asyncValidator('expected'));
var c = new FormControl('', null, asyncValidator('expected'));
expect(c.pending).toEqual(true);
@ -106,8 +106,8 @@ export function main() {
}));
it('should only use the latest async validation run', fakeAsync(() => {
var c =
new Control('', null, asyncValidator('expected', {'long': 200, 'expected': 100}));
var c = new FormControl(
'', null, asyncValidator('expected', {'long': 200, 'expected': 100}));
c.updateValue('long');
c.updateValue('expected');
@ -120,12 +120,12 @@ export function main() {
describe('dirty', () => {
it('should be false after creating a control', () => {
var c = new Control('value');
var c = new FormControl('value');
expect(c.dirty).toEqual(false);
});
it('should be true after changing the value of the control', () => {
var c = new Control('value');
var c = new FormControl('value');
c.markAsDirty();
expect(c.dirty).toEqual(true);
});
@ -134,8 +134,8 @@ export function main() {
describe('updateValue', () => {
var g: any /** TODO #9100 */, c: any /** TODO #9100 */;
beforeEach(() => {
c = new Control('oldValue');
g = new ControlGroup({'one': c});
c = new FormControl('oldValue');
g = new FormGroup({'one': c});
});
it('should update the value of the control', () => {
@ -191,7 +191,7 @@ export function main() {
describe('valueChanges & statusChanges', () => {
var c: any /** TODO #9100 */;
beforeEach(() => { c = new Control('old', Validators.required); });
beforeEach(() => { c = new FormControl('old', Validators.required); });
it('should fire an event after the value has been updated',
inject([AsyncTestCompleter], (async: AsyncTestCompleter) => {
@ -214,7 +214,7 @@ export function main() {
}));
it('should fire an event after the status has been updated to pending', fakeAsync(() => {
var c = new Control('old', Validators.required, asyncValidator('expected'));
var c = new FormControl('old', Validators.required, asyncValidator('expected'));
var log: any[] /** TODO #9100 */ = [];
ObservableWrapper.subscribe(c.valueChanges, (value) => log.push(`value: '${value}'`));
@ -269,7 +269,7 @@ export function main() {
describe('setErrors', () => {
it('should set errors on a control', () => {
var c = new Control('someValue');
var c = new FormControl('someValue');
c.setErrors({'someError': true});
@ -278,7 +278,7 @@ export function main() {
});
it('should reset the errors and validity when the value changes', () => {
var c = new Control('someValue', Validators.required);
var c = new FormControl('someValue', Validators.required);
c.setErrors({'someError': true});
c.updateValue('');
@ -287,8 +287,8 @@ export function main() {
});
it('should update the parent group\'s validity', () => {
var c = new Control('someValue');
var g = new ControlGroup({'one': c});
var c = new FormControl('someValue');
var g = new FormGroup({'one': c});
expect(g.valid).toEqual(true);
@ -298,8 +298,8 @@ export function main() {
});
it('should not reset parent\'s errors', () => {
var c = new Control('someValue');
var g = new ControlGroup({'one': c});
var c = new FormControl('someValue');
var g = new FormGroup({'one': c});
g.setErrors({'someGroupError': true});
c.setErrors({'someError': true});
@ -308,8 +308,8 @@ export function main() {
});
it('should reset errors when updating a value', () => {
var c = new Control('oldValue');
var g = new ControlGroup({'one': c});
var c = new FormControl('oldValue');
var g = new FormGroup({'one': c});
g.setErrors({'someGroupError': true});
c.setErrors({'someError': true});
@ -322,24 +322,26 @@ export function main() {
});
});
describe('ControlGroup', () => {
describe('FormGroup', () => {
describe('value', () => {
it('should be the reduced value of the child controls', () => {
var g = new ControlGroup({'one': new Control('111'), 'two': new Control('222')});
var g = new FormGroup({'one': new FormControl('111'), 'two': new FormControl('222')});
expect(g.value).toEqual({'one': '111', 'two': '222'});
});
it('should be empty when there are no child controls', () => {
var g = new ControlGroup({});
var g = new FormGroup({});
expect(g.value).toEqual({});
});
it('should support nested groups', () => {
var g = new ControlGroup(
{'one': new Control('111'), 'nested': new ControlGroup({'two': new Control('222')})});
var g = new FormGroup({
'one': new FormControl('111'),
'nested': new FormGroup({'two': new FormControl('222')})
});
expect(g.value).toEqual({'one': '111', 'nested': {'two': '222'}});
(<Control>(g.controls['nested'].find('two'))).updateValue('333');
(<FormControl>(g.controls['nested'].find('two'))).updateValue('333');
expect(g.value).toEqual({'one': '111', 'nested': {'two': '333'}});
});
@ -347,19 +349,19 @@ export function main() {
describe('adding and removing controls', () => {
it('should update value and validity when control is added', () => {
var g = new ControlGroup({'one': new Control('1')});
var g = new FormGroup({'one': new FormControl('1')});
expect(g.value).toEqual({'one': '1'});
expect(g.valid).toBe(true);
g.addControl('two', new Control('2', Validators.minLength(10)));
g.addControl('two', new FormControl('2', Validators.minLength(10)));
expect(g.value).toEqual({'one': '1', 'two': '2'});
expect(g.valid).toBe(false);
});
it('should update value and validity when control is removed', () => {
var g = new ControlGroup(
{'one': new Control('1'), 'two': new Control('2', Validators.minLength(10))});
var g = new FormGroup(
{'one': new FormControl('1'), 'two': new FormControl('2', Validators.minLength(10))});
expect(g.value).toEqual({'one': '1', 'two': '2'});
expect(g.valid).toBe(false);
@ -375,8 +377,8 @@ export function main() {
var simpleValidator = (c: any /** TODO #9100 */) =>
c.controls['one'].value != 'correct' ? {'broken': true} : null;
var c = new Control(null);
var g = new ControlGroup({'one': c}, null, simpleValidator);
var c = new FormControl(null);
var g = new FormGroup({'one': c}, null, simpleValidator);
c.updateValue('correct');
@ -394,8 +396,8 @@ export function main() {
var c: any /** TODO #9100 */, g: any /** TODO #9100 */;
beforeEach(() => {
c = new Control('value');
g = new ControlGroup({'one': c});
c = new FormControl('value');
g = new FormGroup({'one': c});
});
it('should be false after creating a control', () => { expect(g.dirty).toEqual(false); });
@ -412,10 +414,10 @@ export function main() {
var group: any /** TODO #9100 */;
beforeEach(() => {
group = new ControlGroup(
group = new FormGroup(
{
'required': new Control('requiredValue'),
'optional': new Control('optionalValue')
'required': new FormControl('requiredValue'),
'optional': new FormControl('optionalValue')
},
{'optional': false});
});
@ -437,8 +439,11 @@ export function main() {
});
it('should not include an inactive component into the group value', () => {
var group = new ControlGroup(
{'required': new Control('requiredValue'), 'optional': new Control('optionalValue')},
var group = new FormGroup(
{
'required': new FormControl('requiredValue'),
'optional': new FormControl('optionalValue')
},
{'optional': false});
expect(group.value).toEqual({'required': 'requiredValue'});
@ -449,10 +454,10 @@ export function main() {
});
it('should not run Validators on an inactive component', () => {
var group = new ControlGroup(
var group = new FormGroup(
{
'required': new Control('requiredValue', Validators.required),
'optional': new Control('', Validators.required)
'required': new FormControl('requiredValue', Validators.required),
'optional': new FormControl('', Validators.required)
},
{'optional': false});
@ -468,9 +473,9 @@ export function main() {
var g: any /** TODO #9100 */, c1: any /** TODO #9100 */, c2: any /** TODO #9100 */;
beforeEach(() => {
c1 = new Control('old1');
c2 = new Control('old2');
g = new ControlGroup({'one': c1, 'two': c2}, {'two': true});
c1 = new FormControl('old1');
c2 = new FormControl('old2');
g = new FormGroup({'one': c1, 'two': c2}, {'two': true});
});
it('should fire an event after the value has been updated',
@ -548,15 +553,15 @@ export function main() {
describe('getError', () => {
it('should return the error when it is present', () => {
var c = new Control('', Validators.required);
var g = new ControlGroup({'one': c});
var c = new FormControl('', Validators.required);
var g = new FormGroup({'one': c});
expect(c.getError('required')).toEqual(true);
expect(g.getError('required', ['one'])).toEqual(true);
});
it('should return null otherwise', () => {
var c = new Control('not empty', Validators.required);
var g = new ControlGroup({'one': c});
var c = new FormControl('not empty', Validators.required);
var g = new FormGroup({'one': c});
expect(c.getError('invalid')).toEqual(null);
expect(g.getError('required', ['one'])).toEqual(null);
expect(g.getError('required', ['invalid'])).toEqual(null);
@ -565,8 +570,8 @@ export function main() {
describe('asyncValidator', () => {
it('should run the async validator', fakeAsync(() => {
var c = new Control('value');
var g = new ControlGroup({'one': c}, null, null, asyncValidator('expected'));
var c = new FormControl('value');
var g = new FormGroup({'one': c}, null, null, asyncValidator('expected'));
expect(g.pending).toEqual(true);
@ -577,8 +582,8 @@ export function main() {
}));
it('should set the parent group\'s status to pending', fakeAsync(() => {
var c = new Control('value', null, asyncValidator('expected'));
var g = new ControlGroup({'one': c});
var c = new FormControl('value', null, asyncValidator('expected'));
var g = new FormGroup({'one': c});
expect(g.pending).toEqual(true);
@ -589,8 +594,8 @@ export function main() {
it('should run the parent group\'s async validator when children are pending',
fakeAsync(() => {
var c = new Control('value', null, asyncValidator('expected'));
var g = new ControlGroup({'one': c}, null, null, asyncValidator('expected'));
var c = new FormControl('value', null, asyncValidator('expected'));
var g = new FormGroup({'one': c}, null, null, asyncValidator('expected'));
tick(1);
@ -600,16 +605,16 @@ export function main() {
})
});
describe('ControlArray', () => {
describe('FormArray', () => {
describe('adding/removing', () => {
var a: ControlArray;
var a: FormArray;
var c1: any /** TODO #9100 */, c2: any /** TODO #9100 */, c3: any /** TODO #9100 */;
beforeEach(() => {
a = new ControlArray([]);
c1 = new Control(1);
c2 = new Control(2);
c3 = new Control(3);
a = new FormArray([]);
c1 = new FormControl(1);
c2 = new FormControl(2);
c3 = new FormControl(3);
});
it('should support pushing', () => {
@ -640,12 +645,12 @@ export function main() {
describe('value', () => {
it('should be the reduced value of the child controls', () => {
var a = new ControlArray([new Control(1), new Control(2)]);
var a = new FormArray([new FormControl(1), new FormControl(2)]);
expect(a.value).toEqual([1, 2]);
});
it('should be an empty array when there are no child controls', () => {
var a = new ControlArray([]);
var a = new FormArray([]);
expect(a.value).toEqual([]);
});
});
@ -655,8 +660,8 @@ export function main() {
var simpleValidator = (c: any /** TODO #9100 */) =>
c.controls[0].value != 'correct' ? {'broken': true} : null;
var c = new Control(null);
var g = new ControlArray([c], simpleValidator);
var c = new FormControl(null);
var g = new FormArray([c], simpleValidator);
c.updateValue('correct');
@ -672,12 +677,12 @@ export function main() {
describe('dirty', () => {
var c: Control;
var a: ControlArray;
var c: FormControl;
var a: FormArray;
beforeEach(() => {
c = new Control('value');
a = new ControlArray([c]);
c = new FormControl('value');
a = new FormArray([c]);
});
it('should be false after creating a control', () => { expect(a.dirty).toEqual(false); });
@ -690,12 +695,12 @@ export function main() {
});
describe('pending', () => {
var c: Control;
var a: ControlArray;
var c: FormControl;
var a: FormArray;
beforeEach(() => {
c = new Control('value');
a = new ControlArray([c]);
c = new FormControl('value');
a = new FormArray([c]);
});
it('should be false after creating a control', () => {
@ -719,13 +724,13 @@ export function main() {
});
describe('valueChanges', () => {
var a: ControlArray;
var a: FormArray;
var c1: any /** TODO #9100 */, c2: any /** TODO #9100 */;
beforeEach(() => {
c1 = new Control('old1');
c2 = new Control('old2');
a = new ControlArray([c1, c2]);
c1 = new FormControl('old1');
c2 = new FormControl('old2');
a = new FormArray([c1, c2]);
});
it('should fire an event after the value has been updated',
@ -778,23 +783,25 @@ export function main() {
describe('find', () => {
it('should return null when path is null', () => {
var g = new ControlGroup({});
var g = new FormGroup({});
expect(g.find(null)).toEqual(null);
});
it('should return null when path is empty', () => {
var g = new ControlGroup({});
var g = new FormGroup({});
expect(g.find([])).toEqual(null);
});
it('should return null when path is invalid', () => {
var g = new ControlGroup({});
var g = new FormGroup({});
expect(g.find(['one', 'two'])).toEqual(null);
});
it('should return a child of a control group', () => {
var g = new ControlGroup(
{'one': new Control('111'), 'nested': new ControlGroup({'two': new Control('222')})});
var g = new FormGroup({
'one': new FormControl('111'),
'nested': new FormGroup({'two': new FormControl('222')})
});
expect(g.find(['nested', 'two']).value).toEqual('222');
expect(g.find(['one']).value).toEqual('111');
@ -803,7 +810,7 @@ export function main() {
});
it('should return an element of an array', () => {
var g = new ControlGroup({'array': new ControlArray([new Control('111')])});
var g = new FormGroup({'array': new FormArray([new FormControl('111')])});
expect(g.find(['array', 0]).value).toEqual('111');
});
@ -811,8 +818,8 @@ export function main() {
describe('asyncValidator', () => {
it('should run the async validator', fakeAsync(() => {
var c = new Control('value');
var g = new ControlArray([c], null, asyncValidator('expected'));
var c = new FormControl('value');
var g = new FormArray([c], null, asyncValidator('expected'));
expect(g.pending).toEqual(true);

51
modules/@angular/common/test/forms/validators_spec.ts
View File

@ -1,4 +1,4 @@
import {AbstractControl, Control, ControlArray, ControlGroup, Validators} from '@angular/common';
import {AbstractControl, FormControl, Validators} from '@angular/common/src/forms';
import {Log, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
import {afterEach, beforeEach, ddescribe, describe, expect, iit, it, xit} from '@angular/core/testing/testing_internal';
@ -17,30 +17,30 @@ export function main() {
describe('Validators', () => {
describe('required', () => {
it('should error on an empty string',
() => { expect(Validators.required(new Control(''))).toEqual({'required': true}); });
() => { expect(Validators.required(new FormControl(''))).toEqual({'required': true}); });
it('should error on null',
() => { expect(Validators.required(new Control(null))).toEqual({'required': true}); });
() => { expect(Validators.required(new FormControl(null))).toEqual({'required': true}); });
it('should not error on a non-empty string',
() => { expect(Validators.required(new Control('not empty'))).toEqual(null); });
() => { expect(Validators.required(new FormControl('not empty'))).toEqual(null); });
it('should accept zero as valid',
() => { expect(Validators.required(new Control(0))).toEqual(null); });
() => { expect(Validators.required(new FormControl(0))).toEqual(null); });
});
describe('minLength', () => {
it('should not error on an empty string',
() => { expect(Validators.minLength(2)(new Control(''))).toEqual(null); });
() => { expect(Validators.minLength(2)(new FormControl(''))).toEqual(null); });
it('should not error on null',
() => { expect(Validators.minLength(2)(new Control(null))).toEqual(null); });
() => { expect(Validators.minLength(2)(new FormControl(null))).toEqual(null); });
it('should not error on valid strings',
() => { expect(Validators.minLength(2)(new Control('aa'))).toEqual(null); });
() => { expect(Validators.minLength(2)(new FormControl('aa'))).toEqual(null); });
it('should error on short strings', () => {
expect(Validators.minLength(2)(new Control('a'))).toEqual({
expect(Validators.minLength(2)(new FormControl('a'))).toEqual({
'minlength': {'requiredLength': 2, 'actualLength': 1}
});
});
@ -48,16 +48,16 @@ export function main() {
describe('maxLength', () => {
it('should not error on an empty string',
() => { expect(Validators.maxLength(2)(new Control(''))).toEqual(null); });
() => { expect(Validators.maxLength(2)(new FormControl(''))).toEqual(null); });
it('should not error on null',
() => { expect(Validators.maxLength(2)(new Control(null))).toEqual(null); });
() => { expect(Validators.maxLength(2)(new FormControl(null))).toEqual(null); });
it('should not error on valid strings',
() => { expect(Validators.maxLength(2)(new Control('aa'))).toEqual(null); });
() => { expect(Validators.maxLength(2)(new FormControl('aa'))).toEqual(null); });
it('should error on long strings', () => {
expect(Validators.maxLength(2)(new Control('aaa'))).toEqual({
expect(Validators.maxLength(2)(new FormControl('aaa'))).toEqual({
'maxlength': {'requiredLength': 2, 'actualLength': 3}
});
});
@ -65,16 +65,17 @@ export function main() {
describe('pattern', () => {
it('should not error on an empty string',
() => { expect(Validators.pattern('[a-zA-Z ]*')(new Control(''))).toEqual(null); });
() => { expect(Validators.pattern('[a-zA-Z ]*')(new FormControl(''))).toEqual(null); });
it('should not error on null',
() => { expect(Validators.pattern('[a-zA-Z ]*')(new Control(null))).toEqual(null); });
() => { expect(Validators.pattern('[a-zA-Z ]*')(new FormControl(null))).toEqual(null); });
it('should not error on valid strings',
() => { expect(Validators.pattern('[a-zA-Z ]*')(new Control('aaAA'))).toEqual(null); });
it('should not error on valid strings', () => {
expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaAA'))).toEqual(null);
});
it('should error on failure to match string', () => {
expect(Validators.pattern('[a-zA-Z ]*')(new Control('aaa0'))).toEqual({
expect(Validators.pattern('[a-zA-Z ]*')(new FormControl('aaa0'))).toEqual({
'pattern': {'requiredPattern': '^[a-zA-Z ]*$', 'actualValue': 'aaa0'}
});
});
@ -86,22 +87,22 @@ export function main() {
it('should collect errors from all the validators', () => {
var c = Validators.compose([validator('a', true), validator('b', true)]);
expect(c(new Control(''))).toEqual({'a': true, 'b': true});
expect(c(new FormControl(''))).toEqual({'a': true, 'b': true});
});
it('should run validators left to right', () => {
var c = Validators.compose([validator('a', 1), validator('a', 2)]);
expect(c(new Control(''))).toEqual({'a': 2});
expect(c(new FormControl(''))).toEqual({'a': 2});
});
it('should return null when no errors', () => {
var c = Validators.compose([Validators.nullValidator, Validators.nullValidator]);
expect(c(new Control(''))).toEqual(null);
expect(c(new FormControl(''))).toEqual(null);
});
it('should ignore nulls', () => {
var c = Validators.compose([null, Validators.required]);
expect(c(new Control(''))).toEqual({'required': true});
expect(c(new FormControl(''))).toEqual({'required': true});
});
});
@ -131,7 +132,7 @@ export function main() {
]);
var value: any /** TODO #9100 */ = null;
(<Promise<any>>c(new Control('invalid'))).then(v => value = v);
(<Promise<any>>c(new FormControl('invalid'))).then(v => value = v);
tick(1);
@ -142,7 +143,7 @@ export function main() {
var c = Validators.composeAsync([asyncValidator('expected', {'one': true})]);
var value: any /** TODO #9100 */ = null;
(<Promise<any>>c(new Control('expected'))).then(v => value = v);
(<Promise<any>>c(new FormControl('expected'))).then(v => value = v);
tick(1);
@ -153,7 +154,7 @@ export function main() {
var c = Validators.composeAsync([asyncValidator('expected', {'one': true}), null]);
var value: any /** TODO #9100 */ = null;
(<Promise<any>>c(new Control('invalid'))).then(v => value = v);
(<Promise<any>>c(new FormControl('invalid'))).then(v => value = v);
tick(1);