Ionic 4 ion-searchbar and FormControl error

Ionic Framework ionic-v3
1

I am getting an error when binding FormControl to an ion-searchbar in Ionic 4. This used to work in v3. This is an Ionic/Angular project

Here is the ERROR:

    <ion-searchbar [ERROR ->][(ngModel)]="searchTerm" [formControl]="searchControl" (ionInput)="onSearchInput()"></ion-searchbar>

"): ng:///HomePageModule/HomePage.html@15:19
Can’t bind to ‘formControl’ since it isn’t a known property of ‘ion-searchbar’.

  1. If ‘ion-searchbar’ is an Angular component and it has ‘formControl’ input, then verify that it is part of this module.
  2. If ‘ion-searchbar’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("

I don’t quite grasp what the error is suggesting I need to do. Any help would be appreciated.

Thanks,
Adam

1 Like
2

I had the same issue, I just got rid of the formcontrol :

<ion-searchbar   debounce="500" placeholder="..." [(ngModel)]="searchTerm" (ionChange)="triggerSearch(searchTerm)" (ionClear)="cancelSearch()" (ionCancel)="emptySearch()"></ion-searchbar>
1 Like
3

@werewolfe If you have not fixed it yet, it looks like you may be missing an import in the module for whatever component your using the search bar in.

Add ReactiveFormsModule to the imports

3 Likes
4

add this import in .module.ts

import { FormsModule } from ‘@angular/forms’;

1 Like