Không thể liên kết với 'formControl' vì đây không phải là thuộc tính đã biết của 'đầu vào' - Sự cố tự động hoàn thành vật liệu Angular2

Tôi đang cố gắng sử dụng thành phần Angular Material Autocomplete trong dự án Angular 2 của tôi. Tôi đã thêm vào sau đây vào mẫu của tôi.

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

Sau đây là thành phần của tôi.

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

Tôi nhận được lỗi sau. Có vẻ như lệnh formControlnày không được tìm thấy.

Không thể liên kết với 'formControl' vì đây không phải là thuộc tính được biết đến của 'đầu vào'

Vấn đề ở đây là gì?

Trong khi sử dụng formControl, bạn phải nhập ReactiveFormsModulevào importsmảng của bạn .

Thí dụ:

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

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

Quên cố gắng giải mã ví dụ .ts - như những người khác đã nói nó thường không đầy đủ.

Thay vào đó, chỉ cần nhấp vào biểu tượng 'bật ra' được khoanh tròn ở đây và bạn sẽ có được một ví dụ StackBlitz hoạt động đầy đủ .

Bạn có thể nhanh chóng xác nhận các mô-đun cần thiết:

Nhận xét bất kỳ trường hợp nào ReactiveFormsModulevà chắc chắn bạn sẽ gặp lỗi:

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

Từ phiên bản 9.1.4, bạn chỉ cần nhập ReactiveFormsModule

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

Bắt đầu bằng cách thêm một matInput thông thường vào mẫu của bạn. Giả sử bạn đang sử dụng chỉ thị formControl từ ReactiveFormsModule để theo dõi giá trị của đầu vào.

Các hình thức phản ứng cung cấp một cách tiếp cận theo mô hình để xử lý các đầu vào của biểu mẫu có giá trị thay đổi theo thời gian. Hướng dẫn này chỉ cho bạn cách tạo và cập nhật điều khiển biểu mẫu đơn giản, tiến tới sử dụng nhiều điều khiển trong một nhóm, xác thực giá trị biểu mẫu và triển khai các biểu mẫu nâng cao hơn.

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

...

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