Angular 4 -> 6 代码错误 "There is no directive with "exportAs" set to "ngModel""

16 浏览
0 Comments

Angular 4 -> 6 代码错误 "There is no directive with "exportAs" set to "ngModel""

我正在使用RC4版本，并且由于我的模板出现错误“没有将“exportAs”设置为“ngForm”的指令”。这是由于我的模板引起的：

ngControl="actionType"

===> #actionType="ngForm"

id="actionType"

class="form-control"

required>

{{ actionType.label }}

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

这是我的下拉列表：

我的组件ts文件：

我以前是这样表示它的：

categoryControlGroups:ControlGroup[] = [];

categories:ControlArray = new ControlArray(this.categoryControlGroups);

现在我这样做：

categoryControlGroups:FormGroup[] = [];

categories:FormArray = new FormArray(this.categoryControlGroups);

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

0

3 答案

0 Comments

这个问题的出现原因是因为在app.module.ts中没有正确导入FormsModule模块。解决方法是在app.module.ts文件中添加FormsModule的导入。

具体步骤如下：

1. 打开app.module.ts文件。

2. 在文件开头的import部分中添加以下代码：

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

3. 在@NgModule装饰器的imports数组中添加FormsModule：

imports: [
    BrowserModule,
    FormsModule
  ],

4. 保存文件并重新编译运行应用程序。

以上是解决这个问题的方法。在这个问题中，有用户遇到了类似的问题，但是尽管已经在app.module.ts文件中导入了FormsModule模块，仍然无法解决问题。可能还有其他原因导致该问题的出现，可以尝试查看其他可能的解决方法。

0
0 Comments

Angular 4 -> 6代码错误 "There is no directive with "exportAs" set to "ngModel"" 问题的出现原因是没有将FormsModule导入到.spec.ts文件中，并在beforeEach函数中添加了FormsModule的导入。解决方法是添加FormsModule导入到.spec.ts文件，并在beforeEach函数中添加FormsModule的导入。

在解决这个问题的过程中，我遇到了相同的问题。通过将FormsModule导入到.spec.ts文件中解决了这个问题，然后在beforeEach函数中添加了FormsModule的导入。具体的解决方法如下：

首先，在.spec.ts文件中添加FormsModule的导入。代码如下：

import { FormsModule } from '/forms';

然后，在beforeEach函数中添加FormsModule的导入。代码如下：

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

0
0 Comments

Angular 4 -> 6代码错误"There is no directive with "exportAs" set to "ngModel""的原因是在Angular 2.0.0.rc6版本中，已经移除了提供的函数provideForms()和disableDeprecatedForms()。取而代之的是，请从/forms目录中导入FormsModule或ReactiveFormsModule。如果你使用的是模板驱动的表单，那么在你的app.module.ts中添加FormsModule；如果你使用的是模型驱动的表单，那么添加ReactiveFormsModule。

因此，在你的app.module.ts或相应的文件中添加以下代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent
  ],
  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"

如果你不确定，你可以同时提供FormsModule和ReactiveFormsModule，但它们也可以单独运行。当你提供这些模块中的一个时，该模块的默认表单指令和提供者将在整个应用程序中可用。

另外，如果你在使用旧的指令，比如ngControl，那就有问题了，因为新的表单中没有ngControl。它被ngModel代替了。例如，的等效写法是，所以在模板中进行更改。类似地，控件中的导出不再是ngForm，而是ngModel。所以，在你的情况下，将#actionType="ngForm"替换为#actionType="ngModel"。

如果你的代码中有在中吗？尝试将变量名更改为actionType之外的名称。如果代码中有在中，尝试将变量名更改为actionType之外的名称。如果你不确定，请尝试将processus.Process.label更改为processus[i].Process.label，看看是否有改善。如果你有两个