Я пытаюсь создать панель поиска с помощью formControl, но я получил сообщение «Не удается связать с« formControl », так как это не известное свойство ошибки ввода»

Question

^^ Tittle

Я уже импортировал FormsModule, ReactiveFormsModule в свой search-bar.module.ts, но все еще получаю ошибку "Uncaught (in обещание): Ошибка: Ошибки синтаксического анализа шаблона: Невозможно связатьв 'formControl', так как это не известное свойство 'input' '

Может кто-нибудь сказать мне, что я делаю здесь неправильно?Спасибо !!

// search-bar.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { SearchBarComponent } from './search-bar.component';
import { FormControl } from '@angular/forms';
@NgModule({
  declarations: [
    SearchBarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatInputModule,
    HttpClientModule,
    FormControl
  ],
  providers: [],
  bootstrap: [ SearchBarComponent]

})
export class SearchBarModule { }

//search-bar.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

@Component({
  selector: 'search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css'
  ]
})

export class SearchBarComponent {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }
}

//search-bar.component.html

<mat-form-field>
    <input type="text" placeholder="Pick one" matInput [formControl]="myControl" [matAutocomplete]="auto" />

    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of (filteredOptions | async)" [value]="option">
            {{ option }}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>