fix(forms): fixed the handling of the select element

modules/angular2/src/forms/directives.ts

@@ -7,7 +7,10 @@ import {NgFormModel} from './directives/ng_form_model';
 import {NgForm} from './directives/ng_form';
 import {DefaultValueAccessor} from './directives/default_value_accessor';
 import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
-import {SelectControlValueAccessor} from './directives/select_control_value_accessor';
+import {
+  SelectControlValueAccessor,
+  NgSelectOption
+} from './directives/select_control_value_accessor';
 import {NgRequiredValidator} from './directives/validators';
 
 export {NgControlName} from './directives/ng_control_name';
@@ -40,6 +43,7 @@ export const formDirectives: List<Type> = CONST_EXPR([
   NgFormModel,
   NgForm,
 
+  NgSelectOption,
   DefaultValueAccessor,
   CheckboxControlValueAccessor,
   SelectControlValueAccessor,

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

@@ -1,6 +1,7 @@
-import {Directive} from 'angular2/angular2';
+import {Directive, Renderer, ElementRef} from 'angular2/angular2';
 import {NgControl} from './ng_control';
 import {ControlValueAccessor} from './control_value_accessor';
+import {setProperty} from './shared';
 
 /**
  * The accessor for writing a value and listening to changes on a checkbox input element.
@@ -32,13 +33,18 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
   onChange: Function;
   onTouched: Function;
 
-  constructor(private cd: NgControl) {
+  constructor(private cd: NgControl, private renderer: Renderer, private elementRef: ElementRef) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
-  writeValue(value) { this.checked = value; }
+  writeValue(value) {
+    // both this.checked and setProperty are required at the moment
+    // remove when a proper imperative API is provided
+    this.checked = value;
+    setProperty(this.renderer, this.elementRef, "checked", value);
+  }
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }

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

@@ -1,7 +1,8 @@
-import {Directive} from 'angular2/angular2';
+import {Directive, Renderer, ElementRef} from 'angular2/angular2';
 import {NgControl} from './ng_control';
 import {ControlValueAccessor} from './control_value_accessor';
 import {isBlank} from 'angular2/src/facade/lang';
+import {setProperty} from './shared';
 
 /**
  * The default accessor for writing a value and listening to changes that is used by the
@@ -35,13 +36,18 @@ export class DefaultValueAccessor implements ControlValueAccessor {
   onChange: Function;
   onTouched: Function;
 
-  constructor(private cd: NgControl) {
+  constructor(private cd: NgControl, private renderer: Renderer, private elementRef: ElementRef) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
     cd.valueAccessor = this;
   }
 
-  writeValue(value) { this.value = isBlank(value) ? "" : value; }
+  writeValue(value) {
+    // both this.value and setProperty are required at the moment
+    // remove when a proper imperative API is provided
+    this.value = isBlank(value) ? '' : value;
+    setProperty(this.renderer, this.elementRef, 'value', this.value);
+  }
 
   registerOnChange(fn): void { this.onChange = fn; }
 

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

@@ -1,6 +1,22 @@
-import {Directive} from 'angular2/angular2';
+import {Directive, Query, QueryList, Renderer, ElementRef} from 'angular2/angular2';
 import {NgControl} from './ng_control';
 import {ControlValueAccessor} from './control_value_accessor';
+import {setProperty} from './shared';
+
+/**
+ * Marks <option> as dynamic, so Angular can be notified when options change.
+ *
+ * #Example:
+ * ```
+ * <select ng-control="city">
+ *   <option *ng-for="#c of cities" [value]="c"></option>
+ * </select>
+ * ``
+ * @exportedAs angular2/forms
+ */
+@Directive({selector: 'option'})
+export class NgSelectOption {
+}
 
 /**
  * The accessor for writing a value and listening to changes on a select element.
@@ -23,19 +39,30 @@ import {ControlValueAccessor} from './control_value_accessor';
   }
 })
 export class SelectControlValueAccessor implements ControlValueAccessor {
-  value = null;
+  value = '';
   onChange: Function;
   onTouched: Function;
 
-  constructor(private cd: NgControl) {
+  constructor(private cd: NgControl, private renderer: Renderer, private elementRef: ElementRef,
+              @Query(NgSelectOption, {descendants: true}) query: QueryList<NgSelectOption>) {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
-    this.value = '';
     cd.valueAccessor = this;
+
+    this._updateValueWhenListOfOptionsChanges(query);
   }
 
-  writeValue(value) { this.value = value; }
+  writeValue(value) {
+    // both this.value and setProperty are required at the moment
+    // remove when a proper imperative API is provided
+    this.value = value;
+    setProperty(this.renderer, this.elementRef, "value", value);
+  }
 
   registerOnChange(fn): void { this.onChange = fn; }
   registerOnTouched(fn): void { this.onTouched = fn; }
+
+  private _updateValueWhenListOfOptionsChanges(query: QueryList<NgSelectOption>) {
+    query.onChange(() => this.writeValue(this.value));
+  }
 }

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

@@ -5,6 +5,8 @@ import {ControlContainer} from './control_container';
 import {NgControl} from './ng_control';
 import {Control} from '../model';
 import {Validators} from '../validators';
+import {Renderer, ElementRef} from 'angular2/angular2';
+
 
 export function controlPath(name, parent: ControlContainer) {
   var p = ListWrapper.clone(parent.path);
@@ -36,4 +38,10 @@ export function setUpControl(c: Control, dir: NgControl) {
 function _throwError(dir: NgControl, message: string): void {
   var path = ListWrapper.join(dir.path, " -> ");
   throw new BaseException(`${message} '${path}'`);
+}
+
+export function setProperty(renderer: Renderer, elementRef: ElementRef, propName: string,
+                            propValue: any) {
+  renderer.setElementProperty(elementRef.parentView.render, elementRef.boundElementIndex, propName,
+                              propValue);
 }