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

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

Answer 1

从2.0.0.rc6开始:

表单:已弃用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"没有指令

如果您有疑问,可以同时提供FormsModule和ReactiveFormsModule共同提供,但它们是完全兼容的.当您提供其中一个模块时,该模块的默认表单指令和提供程序将可供您在应用程序范围内使用.

旧表格使用ngControl？

如果您确实拥有这些模块@NgModule,也许您正在使用旧指令,例如ngControl,这是一个问题,因为ngControl新表单中没有.它被或多或少地替换了*ngModel.

举例来说,相当于<input ngControl="actionType">是<input ngModel name="actionType">,如此改变,在您的模板.

同样,控件中的导出ngForm现在已经不再存在了ngModel.因此,在您的情况下,替换#actionType="ngForm"为#actionType="ngModel".

所以生成的模板应该是(===>更改的地方):

<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

如果你得到这个：

错误：模板解析错误：

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

这被报告为 github 中的错误，那么它可能不是错误，因为您可能会：

1. 有语法错误（例如额外的括号：）[(ngModel)]]=，或
2. 是混合活性形式的指令，例如formControlName，与所述ngModel指令。这“在 Angular v6 中已被弃用，并将在 Angular v7 中删除”，因为这混合了两种形式策略，使其：

• 似乎ngModel正在使用实际的指令，但实际上它是ngModel在反应形式指令上命名的输入/输出属性，它只是近似（某些）其行为。具体来说，它允许获取/设置值和拦截值事件。但是， 的一些ngModel其他功能- 例如使用ngModelOptions延迟更新或导出指令 -根本不起作用（...）

• 这种模式混合了模板驱动和反应式表单策略，我们通常不推荐这样做，因为它没有利用任何一种策略的全部好处。（……）

• 要在 v7 之前更新您的代码，您需要决定是坚持使用响应式表单指令（并使用响应式表单模式获取/设置值）还是切换到模板驱动指令。

当您有这样的输入时：

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

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

看起来您在ngModel与formControlName.

但是，如果您ngModel在引用变量中添加一个值，例如：

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

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

Answer 5

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

改变了

<input #myComponent="ngModel" />

到

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