不能绑定到'formControl'，因为它不是'input'的已知属性 - angular2材料自动完成的问题

我试图在我的angular2项目中使用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'，因为它不是'input&#39的已知属性。

这里的问题是什么？

Kamil Naja
已编辑的问题 20日 二月 2019 в 3:49
编程
angular typescript angular-material2 angular-forms
5日 四月 2017 в 1:32
28 种观点
对该问题的评论 (3)
解决办法

在使用 "formControl "时，你必须将 "ReactiveFormsModule "导入到你的 "imports "数组。

例子。

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  ...
})
export class AppModule {}
Alexander Abakumov
编辑本段答案27日 八月 2018 в 2:06
评论(5)

忘掉试图解读.ts的例子吧--正如其他人所说，它往往是不完整的。

相反，只要点击这里圈出的'弹出&39;图标，你就会得到一个完全工作的StackBlitz例子。

！[在此输入图片描述][1] 。

你可以快速确认所需的模块。

！[在此输入图片描述][3]

注释掉ReactiveFormsModule的任何实例，当然你就会得到错误。

Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
Simon_Weaver
编辑本段答案2日 三月 2019 в 10:12
评论(1)

首先，在你的模板中添加一个普通的matInput。我们假设你使用ReactiveFormsModule的formControl指令来跟踪输入的值。

反应式表单提供了一种模型驱动的方法来处理值随时间变化的表单输入。本指南向你展示了如何创建和更新一个简单的表单控件，发展到在一个组中使用多个控件，验证表单值，以及实现更高级的表单。

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

...

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    FormsModule,
    RouterModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule],
评论(0)