无法绑定到'formControl',因为它不是'input'的已知属性 - angular2材质自动完成问题

Question

我想在angular2项目中使用角度材质自动完成组件.我在模板中添加了以下内容.

<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'的已知属性

这是什么问题？

Answer 1

使用时formControl,您必须导入ReactiveFormsModule到您的imports阵列.

例:

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

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

Answer 2

忘记尝试破译示例.ts - 正如其他人所说的那样,它通常是不完整的.

而只需单击此处圈出的"弹出"图标,您将获得一个完全正常工作的StackBlitz示例.

您可以快速确认所需的模块:

注释掉任何实例ReactiveFormsModule,并且肯定会得到错误:

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

Answer 3

发生这种情况的另一个原因：

您正在使用的组件formControl未在导入ReactiveFormsModule.

因此，请检查声明引发此错误的组件的模块。

Answer 4

从9.1.4版本开始你只需要导入ReactiveFormsModule

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

Answer 5

如果您使用独立组件，则 ReactiveFormsModule 的导入必须位于自己的组件内，而不是 app.module.ts 内。

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  standalone: true,
  imports: [ ReactiveFormsModule ]
})
export class FormRecipesComponent {

constructor() {}

name = new FormControl('');

}