'입력'의 알려진 속성이 아니므로 'formControl'에 바인딩 할 수 없음-Angular2 Material Autocomplete issue

Angular 2 프로젝트에서 Angular Material Autocomplete 구성 요소 를 사용하려고합니다 . 템플릿에 다음을 추가했습니다.

<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'에 바인딩 할 수 없습니다.

여기서 문제는 무엇입니까?

을 사용하는 동안 배열 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을 추가하여 시작하십시오. 입력 값을 추적하기 위해 ReactiveFormsModule의 formControl 지시문을 사용한다고 가정합니다.

반응성 양식은 시간이 지남에 따라 값이 변하는 양식 입력을 처리하기위한 모델 중심 접근 방식을 제공합니다. 이 안내서는 간단한 양식 제어를 작성 및 업데이트하고, 그룹에서 여러 제어를 사용하여 진행하고, 양식 값을 검증하고, 고급 양식을 구현하는 방법을 보여줍니다.

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

...

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