Angular2 错误：没有将“exportAs”设置为“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]);

/// 所以这是我的 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);

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

原文由 Anna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 2.0.0.rc6 开始：

forms : 已弃用 provideForms() 和 disableDeprecatedForms() 功能已被删除。请改为从 @angular/forms 导入 FormsModule 或 ReactiveFormsModule 。

简而言之：

• 如果您使用 _模板驱动的表单_，请将 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”，因为它不是“输入”的已知属性。

无法绑定到“formGroup”，因为它不是“form”的已知属性

没有将“exportAs”设置为“ngForm”的指令

如果您有疑问， 您可以同时提供 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 属性，这正是您现在遇到的情况。

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果 ngModule 在输入方式中不起作用，请尝试…删除 ngModule 周围的双引号

喜欢

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

而不是上面

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

原文由 user13482587 发布，翻译遵循 CC BY-SA 4.0 许可协议