'Form' için bilinen bir özellik olmadığından 'formControl'e bağlanamıyor - Angular2 Material Autocomplete issue

Açısal 2 projemde Açısal Malzeme Otomatik Tamamlama bileşenini kullanmaya çalışıyorum . Şablonuma aşağıdakileri ekledim.

<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>

Benim bileşenim aşağıda.

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;
    }
}

Aşağıdaki hatayı alıyorum. formControlDirektif bulunmuyor gibi görünüyor .

'İnput' öğesinin bilinen bir özelliği olmadığından 'formControl' öğesine bağlanamıyor

Burada sorun nedir?

Kullanırken dizinize formControliçe aktarmanız ReactiveFormsModulegerekir imports.

Misal:

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

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

Diğerlerinin söylediği gibi, genellikle .ts örneğini deşifre etmeye çalışmayı unutun.

Bunun yerine, burada daire içine alınmış 'pop-out' simgesine tıkladığınızda tam olarak çalışan bir StackBlitz örneği elde edersiniz .

Gerekli modülleri hızlı bir şekilde onaylayabilirsiniz:

İle ilgili tüm örnekleri ReactiveFormsModuleyorumlayın ve hatayı alacağınızdan emin olun:

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

9.1.4 sürümünden yalnızca içe aktarmanız gerekir ReactiveFormsModule

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

Şablonunuza düzenli bir matInput ekleyerek başlayın. Girdinin değerini izlemek için ReactiveFormsModule'den formControl yönergesini kullandığınızı varsayalım.

Reaktif formlar, değerleri zaman içinde değişen form girdilerini işlemek için modele dayalı bir yaklaşım sağlar. Bu kılavuz, basit bir form denetiminin nasıl oluşturulacağını ve güncelleştirileceğini, bir grupta birden çok denetimin kullanılmasına nasıl devam edileceğini, form değerlerinin nasıl doğrulanacağını ve daha gelişmiş formların nasıl uygulanacağını gösterir.

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

...

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