diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts index 35b4f80451..20f2880e28 100644 --- a/ionic/components/search-bar/search-bar.ts +++ b/ionic/components/search-bar/search-bar.ts @@ -16,10 +16,6 @@ import {ConfigComponent} from '../../config/decorators'; */ @ConfigComponent({ selector: 'ion-search-bar', - inputs: [ - 'list', - 'model: ngModel' - ], defaultInputs: { 'showCancel': false, 'cancelText': 'Cancel', @@ -32,15 +28,16 @@ import {ConfigComponent} from '../../config/decorators'; template: '
' + '
' + - '' + - '' + + '' + + '' + '
' + '', directives: [FORM_DIRECTIVES, NgIf, NgClass] }) export class SearchBar extends Ion { + query: string; /** * TODO * @param {ElementRef} elementRef TODO @@ -61,10 +58,7 @@ export class SearchBar extends Ion { } this.ngControl = ngControl; - - ngControl.valueAccessor = this; - - this.query = ''; + this.ngControl.valueAccessor = this; } // Add the margin for iOS @@ -77,7 +71,8 @@ export class SearchBar extends Ion { } // If the user passes in a value to the model we should left align - this.shouldLeftAlign = this.model && this.model.trim() != ''; + this.shouldLeftAlign = this.ngControl && this.ngControl.value.trim() != ''; + this.query = this.ngControl.value; } /** @@ -85,7 +80,7 @@ export class SearchBar extends Ion { * ControlDirective to update the value internally. */ writeValue(value) { - this.model = value; + this.query = value; } registerOnChange(fn) { @@ -97,6 +92,7 @@ export class SearchBar extends Ion { } inputChanged(event) { + this.writeValue(event.target.value); this.onChange(event.target.value); } @@ -111,7 +107,7 @@ export class SearchBar extends Ion { inputBlurred() { this.isFocused = false; - this.shouldLeftAlign = this.model && this.model.trim() != ''; + this.shouldLeftAlign = this.ngControl && this.ngControl.value.trim() != ''; if (this.cancelButton) { this.cancelButton.style.marginRight = "-" + this.cancelWidth + "px"; @@ -119,8 +115,8 @@ export class SearchBar extends Ion { } clearInput(event) { - this.model = ''; - this.onChange(this.model); + this.writeValue(''); + this.onChange(''); } } diff --git a/ionic/components/search-bar/test/floating/index.ts b/ionic/components/search-bar/test/floating/index.ts index d76585b913..a6b40c8328 100644 --- a/ionic/components/search-bar/test/floating/index.ts +++ b/ionic/components/search-bar/test/floating/index.ts @@ -8,12 +8,12 @@ import {SearchPipe} from 'ionic/components/search-bar/search-bar'; directives: [FORM_DIRECTIVES] }) class IonicApp { - defaultSearch: string; - customPlaceholder: string; - defaultCancel: string; - customCancel: string; - customCancelLong: string; - customCancelAction: string; + defaultSearch: string = ''; + customPlaceholder: string = ''; + defaultCancel: string = ''; + customCancel: string = ''; + customCancelLong: string = ''; + customCancelAction: string = ''; clickedCustomAction: boolean = false; constructor() { diff --git a/ionic/components/search-bar/test/model/main.html b/ionic/components/search-bar/test/model/main.html index dd76b512a2..9e2242416d 100644 --- a/ionic/components/search-bar/test/model/main.html +++ b/ionic/components/search-bar/test/model/main.html @@ -2,7 +2,7 @@ -
+ @@ -10,7 +10,7 @@ {{item.title}} -
+