Tidak dapat mengikat ke 'formControl' karena ini bukan properti yang dikenal dari 'input' - Angular2 Material Autocomplete issues

Saya mencoba menggunakan komponen Autocomplete Angular Material dalam proyek Angular 2 saya. Saya menambahkan yang berikut ke templat saya.

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

Berikut ini adalah komponen saya.

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

Saya mendapatkan kesalahan berikut. Sepertinya formControlarahan tidak ditemukan.

Tidak dapat mengikat ke 'formControl' karena ini bukan properti 'input' yang dikenal

apa yang terjadi disini?

Saat menggunakan formControl, Anda harus mengimpor ReactiveFormsModuleke importsarray Anda .

Contoh:

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

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

Lupakan mencoba menguraikan contoh .ts - seperti yang dikatakan orang lain seringkali tidak lengkap.

Alih-alih, klik ikon 'pop-out' yang dilingkari di sini dan Anda akan mendapatkan contoh StackBlitz yang berfungsi penuh .

Anda dapat dengan cepat mengkonfirmasi modul yang diperlukan:

Komentari setiap kejadian ReactiveFormsModule, dan cukup yakin Anda akan mendapatkan kesalahan:

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

Dari versi 9.1.4 Anda hanya perlu mengimpor ReactiveFormsModule

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

Mulailah dengan menambahkan matInput biasa ke templat Anda. Mari kita asumsikan Anda menggunakan direktif formControl dari ReactiveFormsModule untuk melacak nilai input.

Formulir reaktif menyediakan pendekatan berbasis model untuk menangani input formulir yang nilainya berubah seiring waktu. Panduan ini menunjukkan kepada Anda cara membuat dan memperbarui kontrol formulir sederhana, maju menggunakan beberapa kontrol dalam grup, memvalidasi nilai formulir, dan menerapkan formulir lebih lanjut.

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

...

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