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

Question

我在 RC4 上，我收到错误消息 There is no directive with "exportAs"set to "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属性，就是您现在遇到的情况。