无法绑定到“formControl”，因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题
Posted
技术标签:
【中文标题】无法绑定到“formControl”，因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题【英文标题】：Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue 【发布时间】：2017-08-30 10:16:23 【问题描述】：我正在尝试在我的 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”，因为它不是“输入”的已知属性
这里有什么问题？
【问题讨论】：
对 Pengyy 回答的评论：在使用formControl 时，您必须将 ReactiveFormsModule 导入到您的 模块，而不是 rootModule。以防万一您在功能模块中使用FormControl。
我有类似的情况，并且在我的功能中导入了 ReactiveFormsModule。唯一的区别是我想绑定到“formControlName”而不是“formControl”。消息具有相同的结构
这里的答案是正确的；但是如果有人仍然卡住（就像我一样）并且错误显示formcontrol（小写）而不是formControl - 如果您通过webpack html-loader运行模板，这将有所帮助：***.com/a/40626329/287568
【参考方案1】：
在使用formControl 时，您必须将ReactiveFormsModule 导入到您的imports 数组中。
例子：
import FormsModule, ReactiveFormsModule from '@angular/forms';
@NgModule(
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
...
)
export class AppModule
【讨论】：
真的，为什么material.angular.io/components/autocomplete/overview 的文档中没有为此浪费大量时间。 Angular 无处不在的神奇未知依赖项。 @Vadorequest：这些文档适用于 Material。如果他们开始为他们使用的 Angular 的每个特性添加文档，最终可能会在 Angular 文档和 Material 文档之间出现大量重复，最终会失去同步。但我也花了很多时间在这个问题上摸不着头脑。您可以随时向材料 github repo 提交问题：github.com/angular/material2/issues 恕我直言，这不是借口。他们可以做一些事情，也许是链接到某种提示的“一般故障排除”。如果他们的库依赖于其他原生 Angular 依赖项，那么突出这些 dep 也是他们的任务。尤其是在这种情况下，他们的框架毕竟是在“material.angular.io”上的。 或者只是一个标准工具，可以根据您使用的内容自动引入这些类型的模块。听起来像是 webpack 的工作？ 如果您在自动完成文档中查看 Stackblitz，就很清楚需要使用 ReactiveFormsModule。更一般地说，任何组件在其 Stackblitz 演示中都会比页内代码有更多的细节......【参考方案2】：忘记尝试破译示例 .ts - 正如其他人所说，它通常不完整。
只需单击此处圈出的“弹出”图标，您将获得fully working StackBlitz example。
您可以快速确认所需的模块：
注释掉ReactiveFormsModule的任何实例，果然你会得到错误：
Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'.
【讨论】：
谢谢，为我指明了正确的方向，并且知道未来的发展方向！【参考方案3】：发生这种情况的另一个原因：
您在其中使用formControl 的组件未在导入ReactiveFormsModule 的模块中声明。
因此请检查声明引发此错误的组件的模块。
【讨论】：
这解决了问题。谢谢【参考方案4】：从 9.1.4 版本开始你只需要导入ReactiveFormsModule
https://angular.io/guide/reactive-forms
【讨论】：
我为 Angular 的 11 版做了这个，它也有效，谢谢。【参考方案5】：在 Angular 12 中，matautocompleteModule 的导入路径发生了变化，它 解决了我的问题....现在看起来像这样
【讨论】：
【参考方案6】：首先将常规 matInput 添加到您的模板中。假设您正在使用 ReactiveFormsModule 中的 formControl 指令来跟踪输入的值。
反应式表单提供了一种模型驱动的方法来处理值随时间变化的表单输入。本指南向您展示如何创建和更新简单的表单控件、如何在组中使用多个控件、验证表单值以及实现更高级的表单。
import FormsModule, ReactiveFormsModule from "@angular/forms"; //this to use ngModule
...
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
FormsModule,
RouterModule,
ReactiveFormsModule,
BrowserAnimationsModule,
MaterialModule],
【讨论】：
【参考方案7】：嗯，对我有用的是在@component() 中的模板`` 中构建表单，例如--
import Component, OnInit from '@angular/core';
import FormControl from '@angular/forms';
@Component(
selector: 'app-contact-form',
template:`
<form class="validation-form" validate method="createUserWithEmailAndPassword">
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" [formControl]="firstName" id="firstName" placeholder="Please enter your first name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" [formControl]="lastName" id="lastName" placeholder="Please enter your last name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="email">Email address</label>
<input type="email" [formControl]="email" id="email" aria-describedby="emailHelp" placeholder="Please enter your last name" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="password">Password</label>
<input type="password" [formControl]="password" id="password" placeholder="Please enter your password" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" [formControl]="zip" id="zip" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>`,
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.scss']
)
export class ContactFormComponent implements OnInit
firstName = new FormControl('');
lastName = new FormControl('');
email = new FormControl('');
password = new FormControl('');
constructor()
ngOnInit(): void
这停止显示错误。如果错误仍然存在，那么这可能对您有用
【讨论】：
以上是关于无法绑定到“formControl”，因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题的主要内容，如果未能解决你的问题，请参考以下文章
无法绑定到“formControl”，因为它不是“输入”的已知属性 - Angular2 Material Autocomplete 问题