Fix(search-bar): Have search bar go through items, provide filter, and filter those from list. Make search bar have valueAccessor it self update update control value to watcher

ionic/components/search-bar/search-bar.ts

@@ -1,5 +1,5 @@
-import {ElementRef, Pipe} from 'angular2/angular2';
-//import {ControlGroup, ControlDirective} from 'angular2/forms'
+import {ElementRef, Pipe, NgControl, Renderer} from 'angular2/angular2';
+//import {ControlGroup} from 'angular2/forms'
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -10,6 +10,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
  */
 @IonicComponent({
   selector: 'ion-search-bar',
+  appInjector: [NgControl],
   properties: [
     'list',
     'query'
@@ -36,12 +37,21 @@ export class SearchBar extends Ion {
    */
   constructor(
     elementRef: ElementRef,
-    config: IonicConfig//,
-    //cd:ControlDirective
+    config: IonicConfig,
+    ngControl: NgControl,
+    renderer: Renderer
   ) {
     super(elementRef, config);
-    // this.controlDirective = cd;
-    // cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+    if(!ngControl) {
+      // They don't want to do anything that works, so we won't do anything that breaks
+      return;
+    }
+
+    this.ngControl = ngControl;
+
+    ngControl.valueAccessor = this;
 
     this.query = '';
   }
@@ -52,13 +62,28 @@ export class SearchBar extends Ion {
    */
   writeValue(value) {
     this.value = value;
+    console.log('writeValue', value);
+    this.renderer.setElementProperty(this.elementRef, 'value', this.value);
+
+  }
+
+  registerOnChange(val) {
+    console.log('registerONChange', val);
+  }
+
+  registerOnTouched(val) {
+    console.log('register on touched', val);
   }
 
   inputChanged(event) {
     this.value = event.target.value;
     console.log('Search changed', this.value);
+    this.ngControl.valueAccessor.writeValue(this.value);
+    this.ngControl.control.updateValue(this.value);
+    // this.ngControl.valueAccessor.updateValue(this.value);
+    // this.ngControl.updateValue(this.value);
     // TODO: Better way to do this?
-    this.controlDirective._control().updateValue(event.target.value);
+    //this.controlDirective._control().updateValue(event.target.value);
   }
 
   inputFocused() {

ionic/components/search-bar/test/basic/index.ts

@@ -1,4 +1,5 @@
-import {FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
+import {NgControl} from 'angular2/angular2';
+import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
 
 import {App} from 'ionic/ionic';
 import {SearchPipe} from 'ionic/components/search-bar/search-bar';
@@ -10,7 +11,9 @@ function randomTitle() {
 }
 
 @App({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  bindings: [NgControl],
+  directives: [FORM_DIRECTIVES]
 })
 class IonicApp {
   constructor() {
@@ -32,6 +35,8 @@ class IonicApp {
 
   getItems() {
     var q = this.form.controls.searchQuery.value;
+    console.log('getItem', q);
+    // debugger;
     if(q.trim() == '') {
       return this.items;
     }

ionic/components/search-bar/test/basic/main.html

@@ -1,17 +1,18 @@
 
-<ion-view nav-title="Search Bar">
+<!-- <ion-view nav-title="Search Bar"> -->
 
-  <ion-content [control-group]="form">
+  <ion-content>
+    <form [ng-form-model]="form">
 
-    <ion-search-bar control="searchQuery"></ion-search-bar>
+      <ion-search-bar ng-control="searchQuery"></ion-search-bar>
 
-    <ion-list #list>
-
-      <ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
-        {{item.title}}
-      </ion-item>
-    </ion-list>
+      <ion-list #list>
 
+        <ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
+          {{item.title}}
+        </ion-item>
+      </ion-list>
+    </form>
   </ion-content>
 
-</ion-view>
+<!-- </ion-view> -->

ionic/config/decorators.ts

@@ -69,6 +69,7 @@ export const IONIC_DIRECTIVES = [
   forwardRef(() => Icon),
 
   // Forms
+  forwardRef(() => SearchBar),
   forwardRef(() => Segment),
   forwardRef(() => SegmentButton),
   forwardRef(() => SegmentControlValueAccessor),