我在RC4上，我收到错误由于我的模板，没有指令“exportAs”设置为“ngForm”：
<div class="form-group">
<label for="actionType">Action Type</label>
<select
ngControl="actionType"
===> #actionType="ngForm"
id="actionType"
class="form-control"
required>
<option value=""></option>
<option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
{{ actionType.label }}
</option>
</select>
</div>
boot.ts：
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import {provideRouter} from '@angular/router';
import {APP_ROUTER_PROVIDER} from './routes';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);
///所以这是我的DropdownList：
<fieldset ngControlGroup="linkedProcess" >
<div ngControlGroup="Process" >
<label>Linked Process</label>
<div class="form-group">
<select
ngModel
name="label"
#label="ngModel"
id="label"
class="form-control" required
(change)="reloadProcesse(list.value)"
#list>
<option value=""></option>
<!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>-->
<option *ngFor="let processus of linkedProcess?.processList?.list; let i = index"
value="{{ processus[i].Process.label}}">
{{processus.Process.label}}
</option>
</select>
</div>
</div>
//我的组件ts：
我用这样的旧形式代表它：
categoryControlGroups:ControlGroup[] = [];
categories:ControlArray = new ControlArray(this.categoryControlGroups);
现在我这样做：
categoryControlGroups:FormGroup[] = [];
categories:FormArray = new FormArray(this.categoryControlGroups);
你认为这是问题的原因??
表格：已弃用的
provideForms()和disableDeprecatedForms()函数已被删除。请从FormsModule导入ReactiveFormsModule或@angular/forms。
简而言之：
FormsModule到你的@NgModule。ReactiveFormsModule到你的@NgModule。所以，添加到你的app.module.ts或同等产品：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule, // <========== Add this line!
ReactiveFormsModule // <========== Add this line!
],
declarations: [
AppComponent
// other components of yours
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
如果没有其中一个模块可能会导致错误，包括您面临的错误：
无法绑定到'ngModel'，因为它不是'input'的已知属性。
无法绑定到'formGroup'，因为它不是'form'的已知属性
“exportAs”设置为“ngForm”没有指令
如果你有疑问，you can provide both FormsModule和ReactiveFormsModule在一起，但它们是完全功能分开的。当您提供其中一个模块时，该模块的默认表单指令和提供程序将可供您在应用程序范围内使用。
ngControl的旧表格？如果你在@NgModule上有这些模块，也许你正在使用旧的指令，例如ngControl，这是一个问题，因为新形式中没有ngControl。它被ngModel或多或少地替换了*。
例如，相当于<input ngControl="actionType">的是<input ngModel name="actionType">，所以在模板中更改它。
同样，控制中的出口不再是ngForm，它现在是ngModel。所以，在你的情况下，用#actionType="ngForm"替换#actionType="ngModel"。
所以生成的模板应该是（===>s更改）：
<div class="form-group">
<label for="actionType">Action Type</label>
<select
===> ngModel
===> name="actionType"
===> #actionType="ngModel"
id="actionType"
class="form-control"
required>
<option value=""></option>
<option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
{{ actionType.label }}
</option>
</select>
</div>
*或多或少，因为并非ngControl的所有功能都被移动到ngModel。有些刚被删除或现在不同。一个例子是name属性，就是你现在拥有的情况。
当尝试组合反应形式和模板形式方法时，也意识到这个问题。我在同一个元素上有#name="ngModel"和[formControl]="name"。删除任何一个修复了问题。也不是说，如果你使用#name=ngModel你也应该有一个属性，如这个[(ngModel)]="name"，否则，你仍然会得到错误。这也适用于角度6,7和8。
我遇到了同样的问题。我错过了app.module.ts中的表单模块导入标记
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule,
FormsModule
],
我有同样的问题，通过将FormsModule添加到.spec.ts解决了：
import { FormsModule } from '@angular/forms';
然后将导入添加到beforeEach：
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ YourComponent ]
})
.compileComponents();
}));
在我的情况下，我不得不将FormsModule和ReactiveFormsModule添加到shared.module.ts：
（感谢@ Undrium为code example）：
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule ], declarations: [], exports: [ CommonModule, FormsModule, ReactiveFormsModule ] }) export class SharedModule { }
Angular2中正确的使用形式是：
<form (ngSubmit)="onSubmit()">
<label>Username:</label>
<input type="text" class="form-control" [(ngModel)]="user.username" name="username" #username="ngModel" required />
<label>Contraseña:</label>
<input type="password" class="form-control" [(ngModel)]="user.password" name="password" #password="ngModel" required />
<input type="submit" value="Entrar" class="btn btn-primary"/>
</form>
旧的方式不再适用
我有这个问题，我意识到我没有将我的组件绑定到变量。
变
<input #myComponent="ngModel" />
至
<input #myComponent="ngModel" [(ngModel)]="myvar" />
如果你得到这个：
错误：模板解析错误：
将“exportAs”设置为“ngModel”没有指令
哪个是reported as a bug in github，那么可能它不是一个bug，因为你可能：
[(ngModel)]]=），或formControlName）与ngModel指令混合使用。这个"has been deprecated in Angular v6 and will be removed in Angular v7"，因为这混合了两种形式策略，使它：
- 看起来像是使用了实际的
ngModel指令，但实际上它是一个名为ngModel的输入/输出属性，它在反应式表达式上简单地近似（某些）其行为。具体来说，它允许获取/设置值和拦截值事件。然而，ngModel的一些其他功能 - 比如延迟使用ngModelOptions更新或导出指令 - 根本不起作用（...）- 这种模式混合了模板驱动和反应形式的策略，我们通常不建议这样做，因为它没有利用这两种策略的全部好处。 （......）
- 要在v7之前更新代码，您需要决定是否坚持使用响应式表单指令（以及使用反应式表单模式获取/设置值）或切换到模板驱动的指令。
当你有这样的输入：
<input formControlName="first" [(ngModel)]="value">
它将在浏览器控制台中显示有关混合表单策略的警告：
看起来你在与
ngModel相同的表格领域使用formControlName。
但是，如果将ngModel添加为引用变量中的值，则示例：
<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">
然后触发上述错误，并且不显示有关策略混合的警告。
我有这个问题，因为我的模板[[ngModel]]]附近有一个拼写错误。额外支架。例：
<input id="descr" name="descr" type="text" required class="form-control width-half"
[ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
[disabled]="isDescrReadOnly" #descr="ngModel">
检查您的选择中是否同时具有ngModel and name属性。 Select也是一个表单组件，而不是整个表单，因此更多的本地引用逻辑声明将是： -
<div class="form-group">
<label for="actionType">Action Type</label>
<select
ngControl="actionType"
===> #actionType="ngModel"
ngModel // You can go with 1 or 2 way binding as well
name="actionType"
id="actionType"
class="form-control"
required>
<option value=""></option>
<option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
{{ actionType.label }}
</option>
</select>
</div>
另一个重要的事情是确保在模板驱动方法的情况下导入FormsModule或在Reactive方法的情况下导入ReactiveFormsModule。或者你可以导入两个也完全没问题。