feat(forms): implemented template-driven forms

Author: vsavkin

modules/angular2/src/forms/directives.ts

@@ -1,279 +1,23 @@
-import {Directive, Ancestor} from 'angular2/src/core/annotations/decorators';
-import {Optional} from 'angular2/src/di/decorators';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {Renderer} from 'angular2/src/render/api';
-import {
-  isPresent,
-  isString,
-  CONST_EXPR,
-  isBlank,
-  BaseException,
-  Type
-} from 'angular2/src/facade/lang';
-import {ListWrapper} from 'angular2/src/facade/collection';
-import {ControlGroup, Control, isControl} from './model';
-import {Validators} from './validators';
-
-function _lookupControl(groupDirective: ControlGroupDirective, controlOrName: any): any {
-  if (isControl(controlOrName)) {
-    return controlOrName;
-  }
-
-  if (isBlank(groupDirective)) {
-    throw new BaseException(`No control group found for "${controlOrName}"`);
-  }
-
-  var control = groupDirective.findControl(controlOrName);
-
-  if (isBlank(control)) {
-    throw new BaseException(`Cannot find control "${controlOrName}"`);
-  }
-
-  return control;
-}
-
-/**
- * Binds a control group to a DOM element.
- *
- * # 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.
- *
- * Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
- * `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      inline: "<form [control-group]='loginForm'>" +
- *              "Login <input type='text' control='login'>" +
- *              "Password <input type='password' control='password'>" +
- *              "<button (click)="onLogin()">Login</button>" +
- *              "</form>"
- *      })
- * class LoginComp {
- *  loginForm:ControlGroup;
- *
- *  constructor() {
- *    this.loginForm = new ControlGroup({
- *      login: new Control(""),
- *      password: new Control("")
- *    });
- *  }
- *
- *  onLogin() {
- *    // this.loginForm.value
- *  }
- * }
- *
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({selector: '[control-group]', properties: ['controlOrName: control-group']})
-export class ControlGroupDirective {
-  _groupDirective: ControlGroupDirective;
-  _directives: List<ControlDirective>;
-  _controlOrName: any;
-
-  constructor(@Optional() @Ancestor() groupDirective: ControlGroupDirective) {
-    this._groupDirective = groupDirective;
-    this._directives = ListWrapper.create();
-  }
-
-  set controlOrName(controlOrName) {
-    this._controlOrName = controlOrName;
-    this._updateDomValue();
-  }
-
-  _updateDomValue() { ListWrapper.forEach(this._directives, (cd) => cd._updateDomValue()); }
-
-  addDirective(c: ControlDirective) { ListWrapper.push(this._directives, c); }
-
-  findControl(name: string): any { return this._getControlGroup().controls[name]; }
-
-  _getControlGroup(): ControlGroup {
-    return _lookupControl(this._groupDirective, this._controlOrName);
-  }
-}
-
-
-/**
- * Binds a control to a DOM element.
- *
- * # 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.
- *
- * Here we use {@link formDirectives}, rather than importing each form directive individually, e.g.
- * `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
- *
- *  ```
- * @Component({selector: "login-comp"})
- * @View({
- *      directives: [formDirectives],
- *      inline: "<input type='text' [control]='loginControl'>"
- *      })
- * class LoginComp {
- *  loginControl:Control;
- *
- *  constructor() {
- *    this.loginControl = new Control('');
- *  }
- * }
- *
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({selector: '[control]', properties: ['controlOrName: control']})
-export class ControlDirective {
-  _groupDirective: ControlGroupDirective;
-
-  _controlOrName: any;
-  valueAccessor: any;  // ControlValueAccessor
-
-  validator: Function;
-
-  constructor(@Optional() @Ancestor() groupDirective: ControlGroupDirective) {
-    this._groupDirective = groupDirective;
-    this._controlOrName = null;
-    this.validator = Validators.nullValidator;
-  }
-
-  set controlOrName(controlOrName) {
-    this._controlOrName = controlOrName;
-
-    if (isPresent(this._groupDirective)) {
-      this._groupDirective.addDirective(this);
-    }
-
-    var c = this._control();
-    c.validator = Validators.compose([c.validator, this.validator]);
-
-    if (isBlank(this.valueAccessor)) {
-      throw new BaseException(`Cannot find value accessor for control "${controlOrName}"`);
-    }
-
-    this._updateDomValue();
-    this._setUpUpdateControlValue();
-  }
-
-  _updateDomValue() { this.valueAccessor.writeValue(this._control().value); }
-
-  _setUpUpdateControlValue() {
-    this.valueAccessor.onChange = (newValue) => this._control().updateValue(newValue);
-  }
-
-  _control() { return _lookupControl(this._groupDirective, this._controlOrName); }
-}
-
-/**
- * The default accessor for writing a value and listening to changes that is used by a {@link
-  * Control} directive.
- *
- * This is the default strategy that Angular uses when no other accessor is applied.
- *
- *  # Example
- *  ```
- *  <input type="text" [control]="loginControl">
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: 'input:not([type=checkbox])[control],textarea[control]',
-  hostListeners:
-      {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
-  hostProperties: {'value': 'value'}
-})
-export class DefaultValueAccessor {
-  value = null;
-  onChange: Function;
-
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
-    this.onChange = (_) => {};
-    cd.valueAccessor = this;
-  }
-
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'value', value)
-  }
-}
-
-/**
- * The accessor for writing a value and listening to changes that is used by a {@link
-  * Control} directive.
- *
- * This is the default strategy that Angular uses when no other accessor is applied.
- *
- *  # Example
- *  ```
- *  <input type="text" [control]="loginControl">
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: 'select[control]',
-  hostListeners:
-      {'change': 'onChange($event.target.value)', 'input': 'onChange($event.target.value)'},
-  hostProperties: {'value': 'value'}
-})
-export class SelectControlValueAccessor {
-  value = null;
-  onChange: Function;
-
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
-    this.onChange = (_) => {};
-    this.value = '';
-    cd.valueAccessor = this;
-  }
-
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'value', value)
-  }
-}
-
-/**
- * The accessor for writing a value and listening to changes on a checkbox input element.
- *
- *
- *  # Example
- *  ```
- *  <input type="checkbox" [control]="rememberLogin">
- *  ```
- *
- * @exportedAs angular2/forms
- */
-@Directive({
-  selector: 'input[type=checkbox][control]',
-  hostListeners: {'change': 'onChange($event.target.checked)'},
-  hostProperties: {'checked': 'checked'}
-})
-export class CheckboxControlValueAccessor {
-  checked: boolean;
-  onChange: Function;
-
-  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
-    this.onChange = (_) => {};
-    cd.valueAccessor = this;
-  }
-
-  writeValue(value) {
-    this._renderer.setElementProperty(this._elementRef.parentView.render,
-                                      this._elementRef.boundElementIndex, 'checked', value)
-  }
-}
+import {Type, CONST_EXPR} from 'angular2/src/facade/lang';
+import {ControlNameDirective} from './directives/control_name_directive';
+import {FormControlDirective} from './directives/form_control_directive';
+import {ControlGroupDirective} from './directives/control_group_directive';
+import {FormModelDirective} from './directives/form_model_directive';
+import {TemplateDrivenFormDirective} from './directives/template_driven_form_directive';
+import {DefaultValueAccessor} from './directives/default_value_accessor';
+import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+import {SelectControlValueAccessor} from './directives/select_control_value_accessor';
+
+export {ControlNameDirective} from './directives/control_name_directive';
+export {FormControlDirective} from './directives/form_control_directive';
+export {ControlDirective} from './directives/control_directive';
+export {ControlGroupDirective} from './directives/control_group_directive';
+export {FormModelDirective} from './directives/form_model_directive';
+export {TemplateDrivenFormDirective} from './directives/template_driven_form_directive';
+export {ControlValueAccessor} from './directives/control_value_accessor';
+export {DefaultValueAccessor} from './directives/default_value_accessor';
+export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+export {SelectControlValueAccessor} from './directives/select_control_value_accessor';
 
 /**
  *
@@ -284,9 +28,14 @@ export class CheckboxControlValueAccessor {
  * @exportedAs angular2/forms
  */
 export const formDirectives: List<Type> = CONST_EXPR([
+  ControlNameDirective,
   ControlGroupDirective,
-  ControlDirective,
-  CheckboxControlValueAccessor,
+
+  FormControlDirective,
+  FormModelDirective,
+  TemplateDrivenFormDirective,
+
   DefaultValueAccessor,
+  CheckboxControlValueAccessor,
   SelectControlValueAccessor
-]);
+]);

modules/angular2/src/forms/directives/checkbox_value_accessor.ts

@@ -0,0 +1,37 @@
+import {ElementRef, Directive} from 'angular2/angular2';
+import {Renderer} from 'angular2/src/render/api';
+import {ControlDirective} from './control_directive';
+import {ControlValueAccessor} from './control_value_accessor';
+
+/**
+ * The accessor for writing a value and listening to changes on a checkbox input element.
+ *
+ *
+ *  # Example
+ *  ```
+ *  <input type="checkbox" [control]="rememberLogin">
+ *  ```
+ *
+ * @exportedAs angular2/forms
+ */
+@Directive({
+  selector: 'input[type=checkbox][control],input[type=checkbox][form-control]',
+  hostListeners: {'change': 'onChange($event.target.checked)'},
+  hostProperties: {'checked': 'checked'}
+})
+export class CheckboxControlValueAccessor implements ControlValueAccessor {
+  checked: boolean;
+  onChange: Function;
+
+  constructor(cd: ControlDirective, private _elementRef: ElementRef, private _renderer: Renderer) {
+    this.onChange = (_) => {};
+    cd.valueAccessor = this;
+  }
+
+  writeValue(value) {
+    this._renderer.setElementProperty(this._elementRef.parentView.render,
+                                      this._elementRef.boundElementIndex, 'checked', value)
+  }
+
+  registerOnChange(fn) { this.onChange = fn; }
+}

modules/angular2/src/forms/directives/control_container_directive.ts

@@ -0,0 +1,8 @@
+import {FormDirective} from './form_directive';
+import {List} from 'angular2/src/facade/collection';
+
+export class ControlContainerDirective {
+  name: string;
+  get formDirective(): FormDirective { return null; }
+  get path(): List<string> { return null; }
+}

modules/angular2/src/forms/directives/control_directive.ts

@@ -0,0 +1,11 @@
+import {ControlValueAccessor} from './control_value_accessor';
+import {Validators} from '../validators';
+
+export class ControlDirective {
+  name: string = null;
+  valueAccessor: ControlValueAccessor = null;
+  validator: Function;
+
+  get path(): List<string> { return null; }
+  constructor() { this.validator = Validators.nullValidator; }
+}