无法绑定到“ formControl”，因为它不是“输入”的已知属性-angular2材质自动完成问题

本文翻译自：Can't bind to 'formControl' since it isn't a known property of 'input' - angular2 material Autocomplete issue

I am trying to use angular material autocomplete component in my angular2 project. 我试图在我的angular2项目中使用角度材料自动完成组件。 I added following to my template. 我在模板中添加了以下内容。

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

Following is my component. 以下是我的组件。

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

I'm getting the following error. 我收到以下错误。 It looks like the formControl directive is not being found. 似乎未找到formControl指令。

Can't bind to 'formControl' since it isn't a known property of 'input' 无法绑定到“ formControl”，因为它不是“ input”的已知属性

What is the issue here? 什么是这里的问题？

---

#1楼

参考：https://stackoom.com/question/2VlAo/无法绑定到-formControl-因为它不是-输入-的已知属性-angular-材质自动完成问题

---

#2楼

While using formControl , you have to import ReactiveFormsModule to your imports array. 当使用formControl ，你必须输入ReactiveFormsModule到您的imports阵列。

Example: 例：

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

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

---

#3楼

Forget trying to decipher the example .ts - as others have said it is often incomplete. 忘了尝试解密示例.ts就像其他人所说的那样，它通常是不完整的。

Instead just click on the 'pop-out' icon circled here and you'll get a fully working StackBlitz example . 相反，只需单击此处带圆圈的“弹出”图标，您将获得一个可以正常使用的StackBlitz示例 。

You can quickly confirm the required modules: 您可以快速确认所需的模块：

Comment out any instances of ReactiveFormsModule , and sure enough you'll get the error: 注释掉ReactiveFormsModule所有实例，并确保您会收到错误：

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

---

#4楼

Start by adding a regular matInput to your template. 首先将常规的matInput添加到模板中。 Let's assume you're using the formControl directive from ReactiveFormsModule to track the value of the input. 假设您正在使用ReactiveFormsModule中的formControl指令来跟踪输入的值。

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. 响应式表单提供了一种模型驱动的方法来处理其值随时间变化的表单输入。 This guide shows you how to create and update a simple form control, progress to using multiple controls in a group, validate form values, and implement more advanced forms. 本指南向您展示如何创建和更新简单的表单控件，如何在组中使用多个控件，验证表单值以及实现更高级的表单。

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

... ...

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