refactor(form): misc minor refactoring

Closes angular#3951

Author: vicb

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;

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.
  */

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);
  }

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); }
 

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: `
- *  <form #f="form" (submit)='onLogIn(f.value)'>
- *  Login <input type='text' ng-control='login' #l="form">
- *  <div *ng-if="!l.valid">Login is invalid</div>
+ * <form #f="form" (submit)='onLogIn(f.value)'>
+ * Login <input type='text' ng-control='login' #l="form">
+ * <div *ng-if="!l.valid">Login is invalid</div>
  *
- * Password <input type='password' ng-control='password'>
-
- * <button type='submit'>Log in!</button>
- * </form>
+ * Password <input type='password' ng-control='password'>
+ * <button type='submit'>Log in!</button>
+ * </form>
  * `})
  * 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: `
- *  <form (submit)='onLogIn()'>
- *  Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
- *  Password <input type='password' ng-control='password'
- [(ng-model)]="credentials.password">
- *  <button type='submit'>Log in!</button>
- *  </form>
+ * <form (submit)='onLogIn()'>
+ * Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
+ * Password <input type='password' ng-control='password'
+ * [(ng-model)]="credentials.password">
+ * <button type='submit'>Log in!</button>
+ * </form>
  * `})
  * 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<string, any>) {
+ onChanges(changes: StringMap<string, any>) {
  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;

modules/angular2/src/core/forms/directives/ng_form.ts

@@ -42,8 +42,9 @@ const formDirectiveBinding =
  * </form>
  * `})
  * 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 = <Control>this.form.find(dir.path);
- c.updateValue(value);
+ var ctrl = <Control>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 : <ControlGroup>this.form.find(path);
  }
 
- _later(fn) {
- var c: PromiseCompleter<any> = PromiseWrapper.completer();
- PromiseWrapper.then(c.promise, fn, (_) => {});
- c.resolve(null);
- }
+ _later(fn): void { PromiseWrapper.then(PromiseWrapper.resolve(null), fn, (_) => {}); }
 }

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: "<input type='text' [ng-form-control]='loginControl'>"
  * })
  * 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: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
  * })
  * 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<string, any>) {
+ onChanges(changes: StringMap<string, any>): 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;
  }

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: "<form [ng-form-model]='loginForm'>" +
- * "Login <input type='text' ng-control='login'>" +
- * "Password <input type='password' ng-control='password'>" +
- * "<button (click)="onLogin()">Login</button>" +
- * "</form>"
+ * template: `
+ * <form [ng-form-model]='loginForm'>
+ * Login <input type='text' ng-control='login'>
+ * Password <input type='password' ng-control='password'>
+ * <button (click)="onLogin()">Login</button>
+ * </form>`
  * })
  * 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: "<form [ng-form-model]='loginForm'>" +
- * "Login <input type='text' ng-control='login' [(ng-model)]='login'>" +
- * "Password <input type='password' ng-control='password' [(ng-model)]='password'>" +
- * "<button (click)="onLogin()">Login</button>" +
- * "</form>"
+ * template: `
+ * <form [ng-form-model]='loginForm'>
+ * Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
+ * Password <input type='password' ng-control='password'
+ * [(ng-model)]='credentials.password'>
+ * <button (click)="onLogin()">Login</button>
+ * </form>`
  * })
  * 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  = <Control>this.form.find(dir.path);
- c.updateValue(value);
+ var ctrl  = <Control>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);
  });
  }
 }