Angular2 Error: There is no directive with "exportAs" set to "ngForm"

Question

我在 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]);

/// 所以这是我的下拉列表：

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

您认为这是问题的原因？？

Answer 1

因为 2.0.0.rc6:

forms: deprecated provideForms() and disableDeprecatedForms() functions have been removed. Please import the FormsModule or the ReactiveFormsModule from @angular/forms instead.

简而言之：

如果您使用 template-driven forms, add FormsModule 到您的 @NgModule。
如果您使用 model-driven forms, add 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 { }

没有这些模块之一可能会导致错误，包括您面临的错误：

Can't bind to 'ngModel' since it isn't a known property of 'input'.

Can't bind to 'formGroup' since it isn't a known property of 'form'

There is no directive with "exportAs" set to "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 where changed）：

<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 属性就是一个例子，您现在遇到的就是这种情况。

Answer 2

我遇到了同样的问题。我错过了 app.module.ts

中的表单模块导入标签

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

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

Answer 3

我有同样的问题，通过将 FormsModule 添加到 .spec.ts:

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

然后将导入添加到 beforeEach:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

Answer 4

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>

老办法已经行不通了

Answer 5

我遇到这个问题是因为我的模板中 [(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">

Answer 6

在我的例子中，我还必须将 FormsModule 和 ReactiveFormsModule 添加到 shared.module.ts：

（感谢@Undrium ）：

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

Answer 7

我遇到了这个问题，我意识到我没有将组件绑定到变量。

已更改

<input #myComponent="ngModel" />

到

<input #myComponent="ngModel" [(ngModel)]="myvar" />

Answer 8

检查您的 select 中是否有两个 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 或在响应式方法的情况下导入 ReactiveFormsModule。或者您可以同时导入两者，这也完全没问题。

Answer 9

如果你得到的是这个：

Error: Template parse errors:

There is no directive with "exportAs" set to "ngModel"

这是 reported as a bug in github，那么它可能不是错误，因为您可能会：

有语法错误（例如，一个额外的括号：[(ngModel)]]=），或
混合响应式表单指令，例如formControlName、与ngModel指令。这个 "has been deprecated in Angular v6 and will be removed in Angular v7"，因为它混合了两种形式的策略，所以：

seem like the actual ngModel directive is being used, but in fact it's an input/output property named ngModel on the reactive form directive that simply approximates (some of) its behavior. Specifically, it allows getting/setting the value and intercepting value events. However, some of ngModel's other features - like delaying updates withngModelOptions or exporting the directive - simply don't work (...)

this pattern mixes template-driven and reactive forms strategies, which we generally don't recommend because it doesn't take advantage of the full benefits of either strategy. (...)

To update your code before v7, you'll want to decide whether to stick with reactive form directives (and get/set values using reactive forms patterns) or switch over to template-driven directives.

当你有这样的输入时：

<input formControlName="first" [(ngModel)]="value">

它将在浏览器的控制台中显示有关混合形式策略的警告：

It looks like you're using ngModel on the same form field as formControlName.

但是，如果您将 ngModel 添加为引用变量中的值，例如：

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

然后会触发上述错误，并且不会显示有关策略混合的警告。

Answer 10

也意识到在尝试结合反应式表单和模板表单方法时会出现这个问题。我在同一个元素上有 #name="ngModel" 和 [formControl]="name"。删除其中一个解决了问题。也不是说如果你使用 #name=ngModel 你也应该有一个属性这样的 [(ngModel)]="name" ，否则，你仍然会得到错误。这也适用于 angular 6、7 和 8。

Answer 11

如果 ngModule 在输入中不起作用意味着尝试...删除 ngModule

周围的双引号

喜欢

<input #form="ngModel" [(ngModel)]......></input>

而不是上面

<input #form=ngModel [(ngModel)]......></input> try this

Angular2 Error: There is no directive with "exportAs" set to "ngForm"