From b866f32832886f06187a436b37a187bbda61db72 Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Fri, 10 Jun 2016 11:15:59 -0700 Subject: [PATCH] chore(forms): rename Control, ControlGroup, and ControlArray classes --- modules/@angular/common/src/forms.ts | 8 +- .../src/forms/directives/form_interface.ts | 14 +- .../src/forms/directives/ng_control_group.ts | 12 +- .../src/forms/directives/ng_control_name.ts | 4 +- .../common/src/forms/directives/ng_form.ts | 40 ++-- .../src/forms/directives/ng_form_control.ts | 6 +- .../src/forms/directives/ng_form_model.ts | 42 ++-- .../common/src/forms/directives/ng_model.ts | 10 +- .../common/src/forms/directives/shared.ts | 6 +- .../@angular/common/src/forms/form_builder.ts | 28 +-- modules/@angular/common/src/forms/model.ts | 64 +++--- .../@angular/common/src/forms/validators.ts | 8 +- .../forms-deprecated/form_builder_spec.ts | 2 +- .../test/forms-deprecated/integration_spec.ts | 6 +- .../test/forms-deprecated/model_spec.ts | 2 +- .../test/forms-deprecated/validators_spec.ts | 2 +- .../common/test/forms/directives_spec.ts | 58 +++--- .../common/test/forms/form_builder_spec.ts | 2 +- .../common/test/forms/integration_spec.ts | 86 ++++---- .../@angular/common/test/forms/model_spec.ts | 191 +++++++++--------- .../common/test/forms/validators_spec.ts | 51 ++--- 21 files changed, 328 insertions(+), 314 deletions(-) diff --git a/modules/@angular/common/src/forms.ts b/modules/@angular/common/src/forms.ts index 8bae2c2226..6bf5111e20 100644 --- a/modules/@angular/common/src/forms.ts +++ b/modules/@angular/common/src/forms.ts @@ -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. * diff --git a/modules/@angular/common/src/forms/directives/form_interface.ts b/modules/@angular/common/src/forms/directives/form_interface.ts index 0eeb3913cc..4d1b481540 100644 --- a/modules/@angular/common/src/forms/directives/form_interface.ts +++ b/modules/@angular/common/src/forms/directives/form_interface.ts @@ -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. diff --git a/modules/@angular/common/src/forms/directives/ng_control_group.ts b/modules/@angular/common/src/forms/directives/ng_control_group.ts index 9a5fcdbf8c..9149f1b213 100644 --- a/modules/@angular/common/src/forms/directives/ng_control_group.ts +++ b/modules/@angular/common/src/forms/directives/ng_control_group.ts @@ -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: ` *
- *

Angular Control & ControlGroup Example

+ *

Angular FormControl & FormGroup Example

*
*
*

Enter your name:

@@ -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. diff --git a/modules/@angular/common/src/forms/directives/ng_control_name.ts b/modules/@angular/common/src/forms/directives/ng_control_name.ts index a59f145bd3..9d7014f6df 100644 --- a/modules/@angular/common/src/forms/directives/ng_control_name.ts +++ b/modules/@angular/common/src/forms/directives/ng_control_name.ts @@ -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); } } diff --git a/modules/@angular/common/src/forms/directives/ng_form.ts b/modules/@angular/common/src/forms/directives/ng_form.ts index 5aa59d0893..d488e45e6d 100644 --- a/modules/@angular/common/src/forms/directives/ng_form.ts +++ b/modules/@angular/common/src/forms/directives/ng_form.ts @@ -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 this.form.find(dir.path); } + getControl(dir: NgControl): FormControl { return 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 this.form.find(dir.path); - } + getFormGroup(dir: NgControlGroup): FormGroup { return this.form.find(dir.path); } updateModel(dir: NgControl, value: any): void { PromiseWrapper.scheduleMicrotask(() => { - var ctrl = this.form.find(dir.path); + var ctrl = 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 : this.form.find(path); + return ListWrapper.isEmpty(path) ? this.form : this.form.find(path); } } diff --git a/modules/@angular/common/src/forms/directives/ng_form_control.ts b/modules/@angular/common/src/forms/directives/ng_form_control.ts index 4c2bf28ddd..4f1e32e72d 100644 --- a/modules/@angular/common/src/forms/directives/ng_form_control.ts +++ b/modules/@angular/common/src/forms/directives/ng_form_control.ts @@ -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; diff --git a/modules/@angular/common/src/forms/directives/ng_form_model.ts b/modules/@angular/common/src/forms/directives/ng_form_model.ts index 7d29b8d150..0f97dacd7f 100644 --- a/modules/@angular/common/src/forms/directives/ng_form_model.ts +++ b/modules/@angular/common/src/forms/directives/ng_form_model.ts @@ -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 this.form.find(dir.path); } + getControl(dir: NgControl): FormControl { return 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 this.form.find(dir.path); - } + getFormGroup(dir: NgControlGroup): FormGroup { return this.form.find(dir.path); } updateModel(dir: NgControl, value: any): void { - var ctrl  = this.form.find(dir.path); + var ctrl  = this.form.find(dir.path); ctrl.updateValue(value); } diff --git a/modules/@angular/common/src/forms/directives/ng_model.ts b/modules/@angular/common/src/forms/directives/ng_model.ts index 59bb929d07..b13ee0f7a2 100644 --- a/modules/@angular/common/src/forms/directives/ng_model.ts +++ b/modules/@angular/common/src/forms/directives/ng_model.ts @@ -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; diff --git a/modules/@angular/common/src/forms/directives/shared.ts b/modules/@angular/common/src/forms/directives/shared.ts index 8d300e82e8..245136f811 100644 --- a/modules/@angular/common/src/forms/directives/shared.ts +++ b/modules/@angular/common/src/forms/directives/shared.ts @@ -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]); diff --git a/modules/@angular/common/src/forms/form_builder.ts b/modules/@angular/common/src/forms/form_builder.ts index 5289d1cd09..ed630fec6c 100644 --- a/modules/@angular/common/src/forms/form_builder.ts +++ b/modules/@angular/common/src/forms/form_builder.ts @@ -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)) { diff --git a/modules/@angular/common/src/forms/model.ts b/modules/@angular/common/src/forms/model.ts index b0151e09db..c33e143270 100644 --- a/modules/@angular/common/src/forms/model.ts +++ b/modules/@angular/common/src/forms/model.ts @@ -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) { if (path instanceof Array && ListWrapper.isEmpty(path)) return null; return (>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 = 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 `` 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 `` 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) { diff --git a/modules/@angular/common/src/forms/validators.ts b/modules/@angular/common/src/forms/validators.ts index b1958da086..84b15df228 100644 --- a/modules/@angular/common/src/forms/validators.ts +++ b/modules/@angular/common/src/forms/validators.ts @@ -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 diff --git a/modules/@angular/common/test/forms-deprecated/form_builder_spec.ts b/modules/@angular/common/test/forms-deprecated/form_builder_spec.ts index df3894542f..443ace1abe 100644 --- a/modules/@angular/common/test/forms-deprecated/form_builder_spec.ts +++ b/modules/@angular/common/test/forms-deprecated/form_builder_spec.ts @@ -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'; diff --git a/modules/@angular/common/test/forms-deprecated/integration_spec.ts b/modules/@angular/common/test/forms-deprecated/integration_spec.ts index 8200721057..103bc17055 100644 --- a/modules/@angular/common/test/forms-deprecated/integration_spec.ts +++ b/modules/@angular/common/test/forms-deprecated/integration_spec.ts @@ -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; diff --git a/modules/@angular/common/test/forms-deprecated/model_spec.ts b/modules/@angular/common/test/forms-deprecated/model_spec.ts index f7c6a94f4c..d38fc4d803 100644 --- a/modules/@angular/common/test/forms-deprecated/model_spec.ts +++ b/modules/@angular/common/test/forms-deprecated/model_spec.ts @@ -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'; diff --git a/modules/@angular/common/test/forms-deprecated/validators_spec.ts b/modules/@angular/common/test/forms-deprecated/validators_spec.ts index e47789765e..c504eab111 100644 --- a/modules/@angular/common/test/forms-deprecated/validators_spec.ts +++ b/modules/@angular/common/test/forms-deprecated/validators_spec.ts @@ -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'; diff --git a/modules/@angular/common/test/forms/directives_spec.ts b/modules/@angular/common/test/forms/directives_spec.ts index 1b44609d5f..40168fd40e 100644 --- a/modules/@angular/common/test/forms/directives_spec.ts +++ b/modules/@angular/common/test/forms/directives_spec.ts @@ -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); - (formModel.find(['login'])).updateValue('invalid value'); + (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', () => { - (formModel.find(['login'])).updateValue('initValue'); + (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); - (formModel.find(['passwords', 'password'])).updateValue('somePassword'); - (formModel.find([ + (formModel.find(['passwords', 'password'])).updateValue('somePassword'); + (formModel.find([ 'passwords', 'passwordConfirm' ])).updateValue('someOtherPassword'); // sync validators are set expect(formModel.hasError('differentPasswords', ['passwords'])).toEqual(true); - (formModel.find([ + (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); - (formModel.find(['login'])).updateValue('new value'); + (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'; }); diff --git a/modules/@angular/common/test/forms/form_builder_spec.ts b/modules/@angular/common/test/forms/form_builder_spec.ts index df3894542f..90fd4cf819 100644 --- a/modules/@angular/common/test/forms/form_builder_spec.ts +++ b/modules/@angular/common/test/forms/form_builder_spec.ts @@ -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'; diff --git a/modules/@angular/common/test/forms/integration_spec.ts b/modules/@angular/common/test/forms/integration_spec.ts index 17d9f8b3a8..c4e3709512 100644 --- a/modules/@angular/common/test/forms/integration_spec.ts +++ b/modules/@angular/common/test/forms/integration_spec.ts @@ -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 = `
@@ -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 = `
@@ -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 = `
`; @@ -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 = `
@@ -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 = `
@@ -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 = `
`; @@ -453,9 +453,9 @@ export function main() { `; 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 = `
@@ -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 = `
@@ -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 = `
@@ -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 = `
@@ -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 = `
@@ -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 = `
@@ -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 = `
`; @@ -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 = `
`; @@ -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 = `
`; @@ -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 = `
`; @@ -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 = `
`; 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; } diff --git a/modules/@angular/common/test/forms/model_spec.ts b/modules/@angular/common/test/forms/model_spec.ts index f7c6a94f4c..75d5e073ae 100644 --- a/modules/@angular/common/test/forms/model_spec.ts +++ b/modules/@angular/common/test/forms/model_spec.ts @@ -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'}}); - ((g.controls['nested'].find('two'))).updateValue('333'); + ((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); diff --git a/modules/@angular/common/test/forms/validators_spec.ts b/modules/@angular/common/test/forms/validators_spec.ts index e47789765e..887d060815 100644 --- a/modules/@angular/common/test/forms/validators_spec.ts +++ b/modules/@angular/common/test/forms/validators_spec.ts @@ -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; - (>c(new Control('invalid'))).then(v => value = v); + (>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; - (>c(new Control('expected'))).then(v => value = v); + (>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; - (>c(new Control('invalid'))).then(v => value = v); + (>c(new FormControl('invalid'))).then(v => value = v); tick(1);