Trying to change my ways

ionic/components/segment/segment.js

@@ -1,10 +1,10 @@
-import {Renderer, ElementRef} from 'angular2/angular2'
+import {Renderer, ElementRef, EventEmitter} from 'angular2/angular2'
 
 import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NgControl} from 'angular2/forms';
+import {Control, NgControl,NgFormControl} from 'angular2/forms';
 import {ControlGroup, ControlDirective} from 'angular2/forms'
 import {dom} from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component'
@@ -23,49 +23,66 @@ export class Segment {
   static get config() {
     return {
       selector: 'ion-segment',
-      appInjector: [ NgControl ],
+      appInjector: [ NgFormControl ],
       properties: [
         'value'
       ],
       host: {
         '(click)': 'buttonClicked($event)',
-        '[value]': 'value'
+        '[value]': 'value',
+        '[class.ng-untouched]': 'cd.control?.untouched == true',
+        '[class.ng-touched]': 'cd.control?.touched == true',
+        '[class.ng-pristine]': 'cd.control?.pristine == true',
+        '[class.ng-dirty]': 'cd.control?.dirty == true',
+        '[class.ng-valid]': 'cd.control?.valid == true',
+        '[class.ng-invalid]': 'cd.control?.valid == false'
       }
     }
   }
 
   constructor(
-    ngControl: NgControl,
+    cd: NgFormControl,
     elementRef: ElementRef,
     renderer: Renderer
   ) {
-    console.log('ELEMENT REF INJECT', elementRef, ngControl);
+    console.log('COnstructing');
     this.domElement = elementRef.domElement
-    //this.config = Segment.config.invoke(this)
     this.elementRef = elementRef;
     this.renderer = renderer;
-    this.ngControl = ngControl;
+
-    this.ngControl.valueAccessor = this;
+    this.change = new EventEmitter('change');
+    this.input = new EventEmitter('input');
+
+    this.cd = cd;
+
+    this.onChange = (_) => {};
+    this.onTouched = (_) => {};
+    cd.valueAccessor = this;
 
     this.buttons = [];
   }
 
   onInit() {
+    console.log('NGFORMCONTROL', this.cd);
     Segment.applyConfig(this);
   }
 
-  /**
-   * Much like ngModel, this is called from our valueAccessor for the attached
-   * ControlDirective to update the value internally.
-   */
   writeValue(value) {
-    this.value = value;
+    console.log('WRITE', value);
+    // both this.value and setProperty are required at the moment
+    // remove when a proper imperative API is provided
+    this.value = !value ? '' : value;
+    this.renderer.setElementProperty(this.elementRef.parentView.render, this.elementRef.boundElementIndex, 'value', this.value);
 
     setTimeout(() => {
       this.selectFromValue(value);
     })
   }
 
+  registerOnChange(fn) { this.onChange = fn; }
+
+  registerOnTouched(fn) { this.onTouched = fn; }
+
   /**
    * Called by child SegmentButtons to bind themselves to
    * the Segment.
@@ -89,7 +106,8 @@ export class Segment {
   selectFromValue(value) {
     for(let button of this.buttons) {
       if(button.value === value) {
-        this.selected(button);
+        button.isActive = true;
+        //this.selected(button);
       }
     }
   }
@@ -99,13 +117,17 @@ export class Segment {
    * Indicate a button should be selected.
    */
   selected(segmentButton) {
-    console.log('Selecting', segmentButton);
     for(let button of this.buttons) {
       button.setActive(false);
     }
     segmentButton.setActive(true);
 
-    this.value = segmentButton.value;
+    this.onChange();
+
+    //this.writeValue(segmentButton.value);
+    //this.value = segmentButton.value;
+
+    //this.ngControl.control().updateValue(this.value);
     // TODO: Better way to do this?
     //this.controlDirective._control().updateValue(this.value);
   }

ionic/components/segment/test/basic/index.js

@@ -1,12 +1,13 @@
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
+import {formDirectives, FormBuilder, Validators, ControlGroup} from 'angular2/forms';
 
 import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
 @IonicView({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  directives: [formDirectives]
 })
 class IonicApp {
   constructor() {
@@ -15,6 +16,7 @@ class IonicApp {
     this.form = fb.group({
       mapStyle: ['hybrid', Validators.required]
     });
+    console.log(this.form);
   }
 
   doSubmit(event) {

ionic/components/segment/test/basic/main.html

@@ -1,17 +1,19 @@
 <ion-content class="padding">
-  <form (^submit)="doSubmit($event)" [control-group]="form">
+  <form (^submit)="doSubmit($event)">
 
-    <ion-segment control="mapStyle">
+    <div ng-control-group="form">
-      <ion-segment-button value="standard" button>
+      <ion-segment ng-control="mapStyle">
-        Standard
+        <ion-segment-button value="standard" button>
-      </ion-segment-button>
+          Standard
-      <ion-segment-button value="hybrid" button>
+        </ion-segment-button>
-        Hybrid
+        <ion-segment-button value="hybrid" button>
-      </ion-segment-button>
+          Hybrid
-      <ion-segment-button value="sat" button>
+        </ion-segment-button>
-        Satellite
+        <ion-segment-button value="sat" button>
-      </ion-segment-button>
+          Satellite
-    </ion-segment>
+        </ion-segment-button>
+      </ion-segment>
+    </div>
     <button type="submit" button primary>Submit</button>
   </form>