Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Jun 10, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions 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.
*
Expand Down Expand Up @@ -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.
*
Expand Down
14 changes: 7 additions & 7 deletions 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';
Expand All @@ -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.
Expand All @@ -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.
Expand Down
12 changes: 6 additions & 6 deletions 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';
Expand All @@ -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>
Expand Down Expand Up @@ -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.
Expand Down
@@ -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';
Expand Down Expand Up @@ -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 changes: 19 additions & 21 deletions modules/@angular/common/src/forms/directives/ng_form.ts
Expand Up @@ -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)};
Expand All @@ -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
Expand Down Expand Up @@ -88,29 +88,29 @@ 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));
}

get submitted(): boolean { return this._submitted; }

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);
Expand All @@ -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(() => {
Expand All @@ -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)) {
Expand All @@ -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);
});
}
Expand All @@ -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);
}
}
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
42 changes: 20 additions & 22 deletions modules/@angular/common/src/forms/directives/ng_form_model.ts
Expand Up @@ -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 */ {
Expand All @@ -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
Expand All @@ -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("")
* });
* }
*
Expand All @@ -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("")
* });
* }
*
Expand All @@ -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();

Expand Down Expand Up @@ -134,36 +134,34 @@ 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});
this.directives.push(dir);
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);
}

Expand Down