fix(forms): add support for radio buttons

Closes #6877

modules/angular2/src/common/forms.ts

@@ -31,7 +31,7 @@ export {
   NgSelectOption,
   SelectControlValueAccessor
 } from './forms/directives/select_control_value_accessor';
-export {FORM_DIRECTIVES} from './forms/directives';
+export {FORM_DIRECTIVES, RadioButtonState} from './forms/directives';
 export {NG_VALIDATORS, NG_ASYNC_VALIDATORS, Validators} from './forms/validators';
 export {
   RequiredValidator,
@@ -39,4 +39,25 @@ export {
   MaxLengthValidator,
   Validator
 } from './forms/directives/validators';
-export {FormBuilder, FORM_PROVIDERS, FORM_BINDINGS} from './forms/form_builder';
+export {FormBuilder} from './forms/form_builder';
+import {FormBuilder} from './forms/form_builder';
+import {RadioControlRegistry} from './forms/directives/radio_control_value_accessor';
+import {Type, CONST_EXPR} from 'angular2/src/facade/lang';
+
+/**
+ * Shorthand set of providers used for building Angular forms.
+ *
+ * ### Example
+ *
+ * ```typescript
+ * bootstrap(MyApp, [FORM_PROVIDERS]);
+ * ```
+ */
+export const FORM_PROVIDERS: Type[] = CONST_EXPR([FormBuilder, RadioControlRegistry]);
+
+/**
+ * See {@link FORM_PROVIDERS} instead.
+ *
+ * @deprecated
+ */
+export const FORM_BINDINGS = FORM_PROVIDERS;

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

@@ -8,6 +8,7 @@ import {NgForm} from './directives/ng_form';
 import {DefaultValueAccessor} from './directives/default_value_accessor';
 import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
 import {NumberValueAccessor} from './directives/number_value_accessor';
+import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
 import {NgControlStatus} from './directives/ng_control_status';
 import {
   SelectControlValueAccessor,
@@ -23,6 +24,10 @@ export {NgFormModel} from './directives/ng_form_model';
 export {NgForm} from './directives/ng_form';
 export {DefaultValueAccessor} from './directives/default_value_accessor';
 export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
+export {
+  RadioControlValueAccessor,
+  RadioButtonState
+} from './directives/radio_control_value_accessor';
 export {NumberValueAccessor} from './directives/number_value_accessor';
 export {NgControlStatus} from './directives/ng_control_status';
 export {
@@ -63,6 +68,7 @@ export const FORM_DIRECTIVES: Type[] = CONST_EXPR([
   NumberValueAccessor,
   CheckboxControlValueAccessor,
   SelectControlValueAccessor,
+  RadioControlValueAccessor,
   NgControlStatus,
 
   RequiredValidator,

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

@@ -18,7 +18,7 @@ const CHECKBOX_VALUE_ACCESSOR = CONST_EXPR(new Provider(
   selector:
       'input[type=checkbox][ngControl],input[type=checkbox][ngFormControl],input[type=checkbox][ngModel]',
   host: {'(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()'},
-  bindings: [CHECKBOX_VALUE_ACCESSOR]
+  providers: [CHECKBOX_VALUE_ACCESSOR]
 })
 export class CheckboxControlValueAccessor implements ControlValueAccessor {
   onChange = (_) => {};

modules/angular2/src/common/forms/directives/radio_control_value_accessor.ts

@@ -0,0 +1,126 @@
+import {
+  Directive,
+  ElementRef,
+  Renderer,
+  Self,
+  forwardRef,
+  Provider,
+  Attribute,
+  Input,
+  OnInit,
+  OnDestroy,
+  Injector,
+  Injectable
+} from 'angular2/core';
+import {
+  NG_VALUE_ACCESSOR,
+  ControlValueAccessor
+} from 'angular2/src/common/forms/directives/control_value_accessor';
+import {NgControl} from 'angular2/src/common/forms/directives/ng_control';
+import {CONST_EXPR, looseIdentical, isPresent} from 'angular2/src/facade/lang';
+import {ListWrapper} from 'angular2/src/facade/collection';
+
+const RADIO_VALUE_ACCESSOR = CONST_EXPR(new Provider(
+    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => RadioControlValueAccessor), multi: true}));
+
+
+/**
+ * Internal class used by Angular to uncheck radio buttons with the matching name.
+ */
+@Injectable()
+export class RadioControlRegistry {
+  private _accessors: any[] = [];
+
+  add(control: NgControl, accessor: RadioControlValueAccessor) {
+    this._accessors.push([control, accessor]);
+  }
+
+  remove(accessor: RadioControlValueAccessor) {
+    var indexToRemove = -1;
+    for (var i = 0; i < this._accessors.length; ++i) {
+      if (this._accessors[i][1] === accessor) {
+        indexToRemove = i;
+      }
+    }
+    ListWrapper.removeAt(this._accessors, indexToRemove);
+  }
+
+  select(accessor: RadioControlValueAccessor) {
+    this._accessors.forEach((c) => {
+      if (c[0].control.root === accessor._control.control.root && c[1] !== accessor) {
+        c[1].fireUncheck();
+      }
+    });
+  }
+}
+
+/**
+ * The value provided by the forms API for radio buttons.
+ */
+export class RadioButtonState {
+  constructor(public checked: boolean, public value: string) {}
+}
+
+
+/**
+ * The accessor for writing a radio control value and listening to changes that is used by the
+ * {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
+ *
+ *  ### Example
+ *  ```
+ *  @Component({
+ *    template: `
+ *      <input type="radio" name="food" [(ngModel)]="foodChicken">
+ *      <input type="radio" name="food" [(ngModel)]="foodFish">
+ *    `
+ *  })
+ *  class FoodCmp {
+ *    foodChicken = new RadioButtonState(true, "chicken");
+ *    foodFish = new RadioButtonState(false, "fish");
+ *  }
+ *  ```
+ */
+@Directive({
+  selector:
+      'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]',
+  host: {'(change)': 'onChange()', '(blur)': 'onTouched()'},
+  providers: [RADIO_VALUE_ACCESSOR]
+})
+export class RadioControlValueAccessor implements ControlValueAccessor,
+    OnDestroy, OnInit {
+  _state: RadioButtonState;
+  _control: NgControl;
+  @Input() name: string;
+  _fn: Function;
+  onChange = () => {};
+  onTouched = () => {};
+
+  constructor(private _renderer: Renderer, private _elementRef: ElementRef,
+              private _registry: RadioControlRegistry, private _injector: Injector) {}
+
+  ngOnInit(): void {
+    this._control = this._injector.get(NgControl);
+    this._registry.add(this._control, this);
+  }
+
+  ngOnDestroy(): void { this._registry.remove(this); }
+
+  writeValue(value: any): void {
+    this._state = value;
+    if (isPresent(value) && value.checked) {
+      this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', true);
+    }
+  }
+
+  registerOnChange(fn: (_: any) => {}): void {
+    this._fn = fn;
+    this.onChange = () => {
+      fn(new RadioButtonState(true, this._state.value));
+      this._registry.select(this);
+    };
+  }
+
+  fireUncheck(): void { this._fn(new RadioButtonState(false, this._state.value)); }
+
+  registerOnTouched(fn: () => {}): void { this.onTouched = fn; }
+}

modules/angular2/src/common/forms/form_builder.ts

@@ -105,22 +105,4 @@ export class FormBuilder {
       return this.control(controlConfig);
     }
   }
-}
-
-/**
- * Shorthand set of providers used for building Angular forms.
- *
- * ### Example
- *
- * ```typescript
- * bootstrap(MyApp, [FORM_PROVIDERS]);
- * ```
- */
-export const FORM_PROVIDERS: Type[] = CONST_EXPR([FormBuilder]);
-
-/**
- * See {@link FORM_PROVIDERS} instead.
- *
- * @deprecated
- */
-export const FORM_BINDINGS = FORM_PROVIDERS;
+}

modules/angular2/src/common/forms/model.ts

@@ -208,6 +208,16 @@ export abstract class AbstractControl {
     return isPresent(this.getError(errorCode, path));
   }
 
+  get root(): AbstractControl {
+    let x: AbstractControl = this;
+
+    while (isPresent(x._parent)) {
+      x = x._parent;
+    }
+
+    return x;
+  }
+
   /** @internal */
   _updateControlsErrors(): void {
     this._status = this._calculateStatus();