diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index e137b0dc7b..7515762138 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/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() { diff --git a/ionic/components/search-bar/test/basic/index.ts b/ionic/components/search-bar/test/basic/index.ts index ca45be710a..7278b6d4f1 100644 --- a/ionic/components/search-bar/test/basic/index.ts +++ b/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; } diff --git a/ionic/components/search-bar/test/basic/main.html b/ionic/components/search-bar/test/basic/main.html index d18522c683..426c89553d 100644 --- a/ionic/components/search-bar/test/basic/main.html +++ b/ionic/components/search-bar/test/basic/main.html @@ -1,17 +1,18 @@ - + - + +
- + - - - - {{item.title}} - - + + + {{item.title}} + + +
-
+ diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts index b4619ea7e4..b191be13d3 100644 --- a/ionic/config/decorators.ts +++ b/ionic/config/decorators.ts @@ -69,6 +69,7 @@ export const IONIC_DIRECTIVES = [ forwardRef(() => Icon), // Forms + forwardRef(() => SearchBar), forwardRef(() => Segment), forwardRef(() => SegmentButton), forwardRef(() => SegmentControlValueAccessor),