From d6cda158793a36cee2d708e966b7f66ecdb4ac1a Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Tue, 1 Sep 2015 20:59:43 -0700 Subject: [PATCH] refactor(form): misc minor refactoring Closes #3951 --- .../directives/checkbox_value_accessor.ts | 2 +- .../forms/directives/control_container.ts | 2 +- .../directives/default_value_accessor.ts | 4 +- .../core/forms/directives/ng_control_group.ts | 7 +- .../core/forms/directives/ng_control_name.ts | 37 ++++---- .../src/core/forms/directives/ng_form.ts | 36 +++----- .../core/forms/directives/ng_form_control.ts | 24 ++--- .../core/forms/directives/ng_form_model.ts | 56 ++++++------ .../src/core/forms/directives/ng_model.ts | 9 +- .../select_control_value_accessor.ts | 4 +- .../src/core/forms/directives/shared.ts | 18 ++-- .../angular2/src/core/forms/form_builder.ts | 14 ++- modules/angular2/src/core/forms/model.ts | 90 ++++++++----------- modules/angular2/src/core/forms/validators.ts | 18 ++-- .../examples/src/model_driven_forms/index.ts | 18 ++-- .../src/template_driven_forms/index.ts | 18 ++-- 16 files changed, 160 insertions(+), 197 deletions(-) diff --git a/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts b/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts index 6d67597a22..f76c38b996 100644 --- a/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts +++ b/modules/angular2/src/core/forms/directives/checkbox_value_accessor.ts @@ -40,7 +40,7 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor { cd.valueAccessor = this; } - writeValue(value: any) { setProperty(this._renderer, this._elementRef, "checked", value); } + writeValue(value: any): void { setProperty(this._renderer, this._elementRef, "checked", value); } get ngClassUntouched(): boolean { return isPresent(this._cd.control) ? this._cd.control.untouched : false; diff --git a/modules/angular2/src/core/forms/directives/control_container.ts b/modules/angular2/src/core/forms/directives/control_container.ts index 62a41b8983..ae37aab62a 100644 --- a/modules/angular2/src/core/forms/directives/control_container.ts +++ b/modules/angular2/src/core/forms/directives/control_container.ts @@ -2,7 +2,7 @@ import {Form} from './form_interface'; import {AbstractControlDirective} from './abstract_control_directive'; /** - * A directive that contains a group of [NgControl]. + * A directive that contains multiple {@link NgControl}. * * Only used by the forms module. */ diff --git a/modules/angular2/src/core/forms/directives/default_value_accessor.ts b/modules/angular2/src/core/forms/directives/default_value_accessor.ts index c46e4bd790..9888f4cfbb 100644 --- a/modules/angular2/src/core/forms/directives/default_value_accessor.ts +++ b/modules/angular2/src/core/forms/directives/default_value_accessor.ts @@ -41,9 +41,7 @@ export class DefaultValueAccessor implements ControlValueAccessor { cd.valueAccessor = this; } - writeValue(value: any) { - // both this.value and setProperty are required at the moment - // remove when a proper imperative API is provided + writeValue(value: any): void { var normalizedValue = isBlank(value) ? '' : value; setProperty(this._renderer, this._elementRef, 'value', normalizedValue); } diff --git a/modules/angular2/src/core/forms/directives/ng_control_group.ts b/modules/angular2/src/core/forms/directives/ng_control_group.ts index 0090108fa9..bb818ab279 100644 --- a/modules/angular2/src/core/forms/directives/ng_control_group.ts +++ b/modules/angular2/src/core/forms/directives/ng_control_group.ts @@ -42,7 +42,8 @@ const controlGroupBinding = * `}) * class SignupComp { * onSignUp(value) { - * // value === {personal: {name: 'some name'}, + * // value === { + * // personal: {name: 'some name'}, * // credentials: {login: 'some login', password: 'some password'}} * } * } @@ -63,9 +64,9 @@ export class NgControlGroup extends ControlContainer implements OnInit, this._parent = _parent; } - onInit() { this.formDirective.addControlGroup(this); } + onInit(): void { this.formDirective.addControlGroup(this); } - onDestroy() { this.formDirective.removeControlGroup(this); } + onDestroy(): void { this.formDirective.removeControlGroup(this); } get control(): ControlGroup { return this.formDirective.getControlGroup(this); } diff --git a/modules/angular2/src/core/forms/directives/ng_control_name.ts b/modules/angular2/src/core/forms/directives/ng_control_name.ts index a9e99d9cfa..ccd39258d9 100644 --- a/modules/angular2/src/core/forms/directives/ng_control_name.ts +++ b/modules/angular2/src/core/forms/directives/ng_control_name.ts @@ -24,24 +24,23 @@ const controlNameBinding = * * In this example, we create the login and password controls. * We can work with each control separately: check its validity, get its value, listen to its - changes. + * changes. * * ``` * @Component({selector: "login-comp"}) * @View({ * directives: [FORM_DIRECTIVES], * template: ` - *
- * Login - *
Login is invalid
+ * + * Login + *
Login is invalid
* - * Password - - * - *
+ * Password + * + * * `}) * class LoginComp { - * onLogIn(value) { + * onLogIn(value): void { * // value === {login: 'some login', password: 'some password'} * } * } @@ -54,17 +53,17 @@ const controlNameBinding = * @View({ * directives: [FORM_DIRECTIVES], * template: ` - *
- * Login - * Password - * - *
+ *
+ * Login + * Password + * + *
* `}) * class LoginComp { * credentials: {login:string, password:string}; * - * onLogIn() { + * onLogIn(): void { * // this.credentials.login === "some login" * // this.credentials.password === "some password" * } @@ -94,18 +93,18 @@ export class NgControlName extends NgControl implements OnChanges, this.validators = validators; } - onChanges(c: StringMap) { + onChanges(changes: StringMap) { if (!this._added) { this.formDirective.addControl(this); this._added = true; } - if (isPropertyUpdated(c, this.viewModel)) { + if (isPropertyUpdated(changes, this.viewModel)) { this.viewModel = this.model; this.formDirective.updateModel(this, this.model); } } - onDestroy() { this.formDirective.removeControl(this); } + onDestroy(): void { this.formDirective.removeControl(this); } viewToModelUpdate(newValue: any): void { this.viewModel = newValue; diff --git a/modules/angular2/src/core/forms/directives/ng_form.ts b/modules/angular2/src/core/forms/directives/ng_form.ts index 7c4cabc1b4..b31bf7d49e 100644 --- a/modules/angular2/src/core/forms/directives/ng_form.ts +++ b/modules/angular2/src/core/forms/directives/ng_form.ts @@ -42,8 +42,9 @@ const formDirectiveBinding = * * `}) * class SignupComp { - * onSignUp(value) { - * // value === {personal: {name: 'some name'}, + * onSignUp(value): void { + * // value === { + * // personal: {name: 'some name'}, * // credentials: {login: 'some login', password: 'some password'}} * } * } @@ -60,14 +61,9 @@ const formDirectiveBinding = exportAs: 'form' }) export class NgForm extends ControlContainer implements Form { - form: ControlGroup; + form: ControlGroup = new ControlGroup({}); ngSubmit = new EventEmitter(); - constructor() { - super(); - this.form = new ControlGroup({}); - } - get formDirective(): Form { return this; } get control(): ControlGroup { return this.form; } @@ -79,10 +75,10 @@ export class NgForm extends ControlContainer implements Form { addControl(dir: NgControl): void { this._later(_ => { var container = this._findContainer(dir.path); - var c = new Control(); - setUpControl(c, dir); - container.addControl(dir.name, c); - c.updateValidity(); + var ctrl = new Control(); + setUpControl(ctrl, dir); + container.addControl(dir.name, ctrl); + ctrl.updateValidity(); }); } @@ -101,9 +97,9 @@ export class NgForm extends ControlContainer implements Form { addControlGroup(dir: NgControlGroup): void { this._later(_ => { var container = this._findContainer(dir.path); - var c = new ControlGroup({}); - container.addControl(dir.name, c); - c.updateValidity(); + var group = new ControlGroup({}); + container.addControl(dir.name, group); + group.updateValidity(); }); } @@ -123,8 +119,8 @@ export class NgForm extends ControlContainer implements Form { updateModel(dir: NgControl, value: any): void { this._later(_ => { - var c = this.form.find(dir.path); - c.updateValue(value); + var ctrl = this.form.find(dir.path); + ctrl.updateValue(value); }); } @@ -138,9 +134,5 @@ export class NgForm extends ControlContainer implements Form { return ListWrapper.isEmpty(path) ? this.form : this.form.find(path); } - _later(fn) { - var c: PromiseCompleter = PromiseWrapper.completer(); - PromiseWrapper.then(c.promise, fn, (_) => {}); - c.resolve(null); - } + _later(fn): void { PromiseWrapper.then(PromiseWrapper.resolve(null), fn, (_) => {}); } } diff --git a/modules/angular2/src/core/forms/directives/ng_form_control.ts b/modules/angular2/src/core/forms/directives/ng_form_control.ts index 9a44a36a58..ee67f7b128 100644 --- a/modules/angular2/src/core/forms/directives/ng_form_control.ts +++ b/modules/angular2/src/core/forms/directives/ng_form_control.ts @@ -17,10 +17,8 @@ const formControlBinding = * # Example * * In this example, we bind the control to an input element. When the value of the input element - * changes, the value of - * the control will reflect that change. Likewise, if the value of the control changes, the input - * element reflects that - * change. + * changes, the value of the control will reflect that change. Likewise, if the value of the + * control changes, the input element reflects that change. * * ``` * @Component({selector: "login-comp"}) @@ -29,16 +27,12 @@ const formControlBinding = * template: "" * }) * class LoginComp { - * loginControl:Control; - * - * constructor() { - * this.loginControl = new Control(''); - * } + * loginControl: Control = new Control('');; * } * * ``` * - * We can also use ng-model to bind a domain model to the form. + * We can also use `ng-model` to bind a domain model to the form. * * ``` * @Component({selector: "login-comp"}) @@ -47,12 +41,8 @@ const formControlBinding = * template: "" * }) * class LoginComp { - * loginControl:Control; + * loginControl: Control = new Control(''); * login:string; - * - * constructor() { - * this.loginControl = new Control(''); - * } * } * ``` */ @@ -76,13 +66,13 @@ export class NgFormControl extends NgControl implements OnChanges { this.validators = validators; } - onChanges(c: StringMap) { + onChanges(changes: StringMap): void { if (!this._added) { setUpControl(this.form, this); this.form.updateValidity(); this._added = true; } - if (isPropertyUpdated(c, this.viewModel)) { + if (isPropertyUpdated(changes, this.viewModel)) { this.form.updateValue(this.model); this.viewModel = this.model; } diff --git a/modules/angular2/src/core/forms/directives/ng_form_model.ts b/modules/angular2/src/core/forms/directives/ng_form_model.ts index e205774218..78ce068a1c 100644 --- a/modules/angular2/src/core/forms/directives/ng_form_model.ts +++ b/modules/angular2/src/core/forms/directives/ng_form_model.ts @@ -21,21 +21,21 @@ const formDirectiveBinding = * # Example * * In this example, we bind the control group to the form element, and we bind the login and - * password controls to the - * login and password elements. + * password controls to the login and password elements. * * ``` * @Component({selector: "login-comp"}) * @View({ * directives: [FORM_DIRECTIVES], - * template: "
" + - * "Login " + - * "Password " + - * "" + - * "
" + * template: ` + *
+ * Login + * Password + * + *
` * }) * class LoginComp { - * loginForm:ControlGroup; + * loginForm: ControlGroup; * * constructor() { * this.loginForm = new ControlGroup({ @@ -44,7 +44,7 @@ const formDirectiveBinding = * }); * } * - * onLogin() { + * onLogin(): void { * // this.loginForm.value * } * } @@ -57,15 +57,17 @@ const formDirectiveBinding = * @Component({selector: "login-comp"}) * @View({ * directives: [FORM_DIRECTIVES], - * template: "
" + - * "Login " + - * "Password " + - * "" + - * "
" + * template: ` + *
+ * Login + * Password + * + *
` * }) * class LoginComp { - * credentials:{login:string, password:string} - * loginForm:ControlGroup; + * credentials: {login: string, password: string}; + * loginForm: ControlGroup; * * constructor() { * this.loginForm = new ControlGroup({ @@ -74,7 +76,7 @@ const formDirectiveBinding = * }); * } * - * onLogin() { + * onLogin(): void { * // this.credentials.login === 'some login' * // this.credentials.password === 'some password' * } @@ -85,9 +87,7 @@ const formDirectiveBinding = selector: '[ng-form-model]', bindings: [formDirectiveBinding], properties: ['form: ng-form-model'], - host: { - '(submit)': 'onSubmit()', - }, + host: {'(submit)': 'onSubmit()'}, events: ['ngSubmit'], exportAs: 'form' }) @@ -97,7 +97,7 @@ export class NgFormModel extends ControlContainer implements Form, directives: NgControl[] = []; ngSubmit = new EventEmitter(); - onChanges(_) { this._updateDomValue(); } + onChanges(_): void { this._updateDomValue(); } get formDirective(): Form { return this; } @@ -106,9 +106,9 @@ export class NgFormModel extends ControlContainer implements Form, get path(): string[] { return []; } addControl(dir: NgControl): void { - var c: any = this.form.find(dir.path); - setUpControl(c, dir); - c.updateValidity(); + var ctrl: any = this.form.find(dir.path); + setUpControl(ctrl, dir); + ctrl.updateValidity(); this.directives.push(dir); } @@ -125,8 +125,8 @@ export class NgFormModel extends ControlContainer implements Form, } updateModel(dir: NgControl, value: any): void { - var c  = this.form.find(dir.path); - c.updateValue(value); + var ctrl  = this.form.find(dir.path); + ctrl.updateValue(value); } onSubmit(): boolean { @@ -136,8 +136,8 @@ export class NgFormModel extends ControlContainer implements Form, _updateDomValue() { ListWrapper.forEach(this.directives, dir => { - var c: any = this.form.find(dir.path); - dir.valueAccessor.writeValue(c.value); + var ctrl: any = this.form.find(dir.path); + dir.valueAccessor.writeValue(ctrl.value); }); } } diff --git a/modules/angular2/src/core/forms/directives/ng_model.ts b/modules/angular2/src/core/forms/directives/ng_model.ts index 14087e9058..3e125798e2 100644 --- a/modules/angular2/src/core/forms/directives/ng_model.ts +++ b/modules/angular2/src/core/forms/directives/ng_model.ts @@ -20,9 +20,8 @@ const formControlBinding = CONST_EXPR(new Binding(NgControl, {toAlias: forwardRe * @Component({selector: "search-comp"}) * @View({ * directives: [FORM_DIRECTIVES], - * template: ` - - * `}) + * template: `` + * }) * class SearchComp { * searchQuery: string; * } @@ -48,14 +47,14 @@ export class NgModel extends NgControl implements OnChanges { this.validators = validators; } - onChanges(c: StringMap) { + onChanges(changes: StringMap) { if (!this._added) { setUpControl(this._control, this); this._control.updateValidity(); this._added = true; } - if (isPropertyUpdated(c, this.viewModel)) { + if (isPropertyUpdated(changes, this.viewModel)) { this._control.updateValue(this.model); this.viewModel = this.model; } diff --git a/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts index 0965020abf..81339616c0 100644 --- a/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts +++ b/modules/angular2/src/core/forms/directives/select_control_value_accessor.ts @@ -9,7 +9,7 @@ import {isPresent} from 'angular2/src/core/facade/lang'; import {setProperty} from './shared'; /** - * Marks