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

Program / 글쓴이

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

답변