Can't bind to 'formControl' since it isn't a known property of 'search-select'.

[melroy89]

Hi,

I try to use your project. But I'm getting an error and I don't know what to do.

Expected behavior: I can use the search-select together with the formControl attribute.

Actual behavior: I'm getting a blocking error when I try to use search-select within my HTML.

I did add the SearchSelectModule to my own module file (my.module.ts) like so:

import { MyDetailComponent } from './my-detail/my-detail.component';
import { SearchSelectModule } from '@oasisdigital/angular-material-search-select';

@NgModule({
  imports: [
    ....
    SearchSelectModule
  ], 
  declarations: [MyDetailComponent, ...]

And defined the local variables in one of the components: my-detail/my-detail.component.ts:

import { FormControl, Validators } from '@angular/forms';
import { OptionEntry, DataSource } from '@oasisdigital/angular-material-search-select';
...

export class MyDetailComponent implements OnInit {
  ours = new FormControl(null, [Validators.required]);
  dataSource: DataSource;

This is the only error I get:

Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'search-select'.
1. If 'search-select' is an Angular component and it has 'formControl' input, then verify that it is part of this module.
2. If 'search-select' 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. ("
          placeholder="Company"
          width="95%"
          [ERROR ->][formControl]="ours"
        [dataSource]="dataSource"></search-select>
      </mat-form-field>
"): ng:///MyModule/MyDetailComponent.html@41:10

What do I wrong!? There is no compile error.

Kind regards,
Melroy van den Berg

[kylecordes]

Hello. It's hard to tell exactly what is wrong with just a few snippets of code. But my guess from this message is that it has little to do with angular-material-search-select directly, but rather that you are not bringing in the FormModule and ReactiveFormModule to your component. Those are the things needed which define the [formControl] binding. The search select component participates in the Angular form binding mechanism but does not itself directly define this binding.

[kylecordes]

example module import here:

https://github.com/OasisDigital/angular-material-search-select/blob/master/src/app/app.module.ts#L64

[melroy89]

Ow you are probably right, I thought these modules where imported by your module internally already. Yea a small usage/getting started could help.

[kylecordes]

They are probably imported inside the module and used there, but since you are using [formControl] from "outside" as you would with any other form control, I think it makes the most sense to import it in the usual way.

I have an idea though, to make a standalone example on StackBlitz, to make it easier to get started.

(It's also possible it might become moot, it sounds like the Angular Material team is eventually going to add some kind of search-select-like capability, eventually. If they do I will aim to upgrade this code to use it, if this code is still necessary.)