Shit

ionic/components/search-bar/search-bar.js

@@ -1,8 +1,10 @@
 import {ElementRef, Pipe} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
-import {IonicComponent} from 'ionic/config/component'
 
+import {ControlGroup, ControlDirective} from 'angular2/forms'
+
+import {IonicComponent} from 'ionic/config/component'
 
 @Component({
   selector: 'ion-search-bar',
@@ -10,26 +12,46 @@ import {IonicComponent} from 'ionic/config/component'
     cancelText: 'cancel-text',
     placeholderText: 'placeholder-text',
     list: 'list',
-    query: 'query'
+    query: 'query',
+    value: 'value'
   }
 })
 @View({
   template: `<div class="search-bar-input-container">
-             <input class="search-bar-input" type="search" [attr.placeholder]="placeholderText">
+             <input [value]="value" (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholderText">
            </div>
            <button class="button search-bar-cancel">{{ cancelText }}</button>`
 })
 export class SearchBar {
   constructor(
-    elementRef: ElementRef
+    elementRef: ElementRef,
+    cd:ControlDirective
   ) {
     this.domElement = elementRef.domElement
     this.config = SearchBar.config.invoke(this)
+    this.controlDirective = cd;
+    cd.valueAccessor = this; //ControlDirective should inject CheckboxControlDirective
+
     setTimeout(() => {
       console.log('Search bar for list', this.list);
       this.query = 'Cats';
     })
   }
+
+  /**
+   * Much like ngModel, this is called from our valueAccessor for the attached
+   * ControlDirective to update the value internally.
+   */
+  writeValue(value) {
+    this.value = value;
+  }
+
+  inputChanged(event) {
+    this.value = event.target.value;
+    console.log('Search changed', this.value);
+    // TODO: Better way to do this?
+    this.controlDirective._control().updateValue(event.target.value);
+  }
 }
 
 export class SearchPipe extends Pipe {
@@ -42,8 +64,8 @@ export class SearchPipe extends Pipe {
     return true;
   }
 
-  transform(value) {
-    console.log('Transforming', value);
+  transform(value, ...args) {
+    console.log('Transforming', value, args);
     return value;
     //return `${value} state:${this.state ++}`;
   }

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

@@ -5,6 +5,8 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import { bind } from 'angular2/di';
 import { PipeRegistry } from 'angular2/change_detection';
 
+import {FormBuilder, Validators, FormDirectives, Control, ControlGroup} from 'angular2/forms';
+
 import {Content} from 'ionic/components/content/content';
 import {List} from 'ionic/components/list/list';
 import {Item} from 'ionic/components/item/item';
@@ -19,12 +21,18 @@ function randomTitle() {
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, List, Item, SearchBar, For]
+  directives: [FormDirectives].concat([Content, List, Item, SearchBar, For])
 })
 class IonicApp {
   constructor() {
     console.log('IonicApp Start')
 
+    var fb = new FormBuilder();
+    this.form = fb.group({
+      searchQuery: ['', Validators.required]
+    });
+
+
     this.query = '';
 
     this.items = []

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

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