Неможливо прив’язати до 'formControl', оскільки це невідома властивість 'input' - випуск автозаповнення Angular2 Material

Я намагаюся використовувати компонент Angular Material Autocomplete у своєму проекті Angular 2. Я додав у свій шаблон наступне.

<md-input-container>
   <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
   <md-option *ngFor="let state of filteredStates | async" [value]="state">
      {{ state }}
   </md-option>
</md-autocomplete>

Слідом - мій компонент.

import {Component, OnInit} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {FormControl} from "@angular/forms";

@Component({
    templateUrl: './edit_item.component.html',
    styleUrls: ['./edit_item.component.scss']
})
export class EditItemComponent implements OnInit {
    stateCtrl: FormControl;
    states = [....some data....];

    constructor(private route: ActivatedRoute, private router: Router) {
        this.stateCtrl = new FormControl();
        this.filteredStates = this.stateCtrl.valueChanges.startWith(null).map(name => this.filterStates(name));
    }
    ngOnInit(): void {
    }
    filterStates(val: string) {
        return val ? this.states.filter((s) => new RegExp(val, 'gi').test(s)) : this.states;
    }
}

Я отримую таку помилку. Схоже, formControlдиректива не знайдена.

Неможливо прив’язати до 'formControl', оскільки це не відома властивість 'input'

У чому тут питання?

Під час використання formControlвам потрібно імпортувати ReactiveFormsModuleдо свого importsмасиву.

Приклад:

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}

Забудьте пробувати розшифрувати приклад .ts - як казали інші, це часто неповно.

Замість цього просто натисніть на значок "спливаючого вікна", закрученим тут, і ви отримаєте повністю працюючий приклад StackBlitz .

Ви можете швидко підтвердити необхідні модулі:

Прокоментуйте будь-які випадки ReactiveFormsModule, і ви точно отримаєте помилку:

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. 

З версії 9.1.4 вам потрібно лише імпортувати ReactiveFormsModule

https://angular.io/guide/reactive-forms

Почніть з додавання звичайного matInput у ваш шаблон. Припустимо, ви використовуєте директиву formControl від ReactiveFormsModule для відстеження значення вхідних даних.

Реактивні форми забезпечують модельний підхід до обробки входів форм, значення яких змінюються з часом. У цьому посібнику ви знайдете, як створити та оновити простий контроль форми, перейти до використання декількох елементів керування в групі, перевірити значення форм та реалізувати більш розширені форми.

import { FormsModule, ReactiveFormsModule } from "@angular/forms"; //this to use ngModule

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],