TypeScript-'s Angular框架错误- "没有指令将exportAs设置为ngForm"

小开

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


@NgModule({
imports: [FormsModule],
...
})

小开

最佳答案

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


@NgModule({
imports: [
BrowserModule,


FormsModule      //<----------make sure you have added this.
],
....
})

小开

检查是否导入了FormsModule。在angular 2的新表单发布版本中没有ngControl。您必须将模板更改为作为示例

<div class="row">
<div class="form-group col-sm-7 col-md-5">
<label for="name">Name</label>
<input type="text" class="form-control" required
[(ngModel)]="user.name"
name="name" #name="ngModel">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</div>

小开

你不仅要将FormsModule导入到根模块AppModule中，还要导入到使用任何angular表单指令的也可以是每个subModule中。

// SubModule A


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


@NgModule({
imports: [
CommonModule,
FormsModule      //<----------make sure you have added this.
],
....
})

小开

(以防别人也像我一样瞎) form 增值 !确保使用<form>标记

不工作:

<div (ngSubmit)="search()" #f="ngForm" class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">Go!</button>
</span>
<input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</div>

效果非常好:

 <form (ngSubmit)="search()" #f="ngForm" class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">Go!</button>
</span>
<input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</form>

小开

你必须关心的三件事:

如果你正在使用子模块，你必须在该子模块中导入FormModule:
```
imports:[CommonModule, HttpModule, FormsModule]
```

你必须在模块中导出FormModule:

exports:[FormsModule]

所以加起来是这样的:

imports:[CommonModule, HttpModule, FormsModule],
exports:[FormsModule],

在文件的顶部，你必须导入FormsModule:
```
import {FormsModule} from '@angular/forms';
```

如果你只使用app.module.ts，那么不需要导出。只需要导入。

小开

我已经在imports[]数组中添加了ReactiveFormsModule来解决这个错误。

错误:没有带有“exportas”的指令;设置为“ngform”;(“;

解决办法:

module.ts:

import {FormsModule, ReactiveFormsModule} from '@angular/forms'


imports: [
BrowserModule,
FormsModule ,
ReactiveFormsModule
],

小开

除了导入登录组件文件中的表单模块，你还需要导入NgForm。

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

这解决了我的问题

小开

如果你已经导入了FormsModule，那么你只需要从输入字段中删除formControlName='whatever'。

小开

你应该用ctrl+c终止app，然后用ng serve重新运行它，如果你没有将FormsModule包含到你的app.module文件导入数组中，然后再添加它，angular不会知道它，它不会重新扫描模块，你应该重新启动app，这样angular就可以看到新模块被包含了，之后它将包含模板驱动方法的所有功能

小开

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


imports:[
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ReactiveFormsModule/*This one in particular*/,...
],

在app.module.ts中永久解决诸如"cannot bind [formGroup] or no directive with export as"之类的错误。

小开

如果一个名称是这样分配的:

#editForm="testForm"

．.． exportAs必须在组件装饰器中定义:

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

小开

在我的例子中，我必须从我的<form>标记中删除ngNoForm属性。

如果你想在你的应用程序中导入FormsModule，但又想跳过某个特定的表单，你可以使用ngNoForm指令来阻止ngForm被添加到表单中

参考:https://www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

小开

这

<div #myForm="ngForm"></div>

也会导致错误，并且可以通过包含ngForm指令来修复。

<div ngForm #myForm="ngForm"></div>

小开

我只是移动路由模块，即说ARoutingModule上面的FormsModule和ReactiveFormsModule和CommonModule之后的导入模块数组。

小开

我也曾问过同样的问题。再来一次，也是因为同样的原因。我来回答一下我做错了什么。可能对某人有帮助。

我通过angular-cli命令创建组件

Ng g c组件/ /一些东西

它所做的，是创建我想要的组件。

另外，在创建组件时，它在App Module的declarations数组中添加了该组件.;< br >

如果是这种情况，请删除它。瞧!它可能会起作用。< / p >

小开

如果你试图使用jasmine在angular中编写单元测试用例，也会出现这个错误。

这个错误的基本概念是import FormsModule。因此，在用于单元测试的文件中，我们添加了imports Section，并将FormsModule放在该文件的下面

    TestBed.configureTestingModule
For eg:
TestBed.configureTestingModule({
declarations: [ XYZComponent ],
**imports: [FormsModule]**,
}).compileComponents();

小开

在我的例子中，我忘记在app.module的声明数组中添加我的组件。Ts，瞧!这个问题已经解决了。

小开

另一项检查:

确保你的组件被添加到app.module.ts中的@NgModule声明数组中

@NgModule({
declarations: [
YourComponent,
],

当运行ng generate component命令时，它不会自动将其添加到app.module中。

小开

是的，我也面临同样的问题…我做了所有的事情，但没有工作。这个解决了我的问题。因为我们在严格模式下使用了angular 'with'

在app.module.ts中添加以下代码

import {FormsModule, ReactiveFormsModule} from '@angular/forms'


imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],

和你使用NgForm的文件

.html文件

<form #form="ngForm" (ngSubmit)="loginSubmit(form);">
</form>

在.ts文件中

import { NgForm } from '@angular/forms';
@Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {
NgForm=NgForm;//this one solve my problem...initialization and declaration
}

小开

你必须声明FormsModule，也必须声明component

declarations: [
YourComponent  -->
],
imports: [
BrowserModule,
FormsModule, -->


    

],

小开

同意@micronyks提供的解决方案，但如果你有一个简单的应用程序，其中没有很多模块，这是正确的。否则，我们需要以类似的方式添加模块，我们使用<表单#loginForm="ngForm">元素，并在该模块中添加以下代码，如果您不想将其公开给所有模块或整个应用程序。

import FormsModule from '@angular/forms';
@NgModule{
imports: [FormsModule],
}

小开

几乎所有的答案都在谈论添加FormsModule模块，但在我的例子中，导入已经完成。正如在回答问题时所说，你必须关闭并重新启动VScode，或者在我的情况下，你必须保存你的工作空间，使用“save workspace As…”一切都将恢复正常。

小开

.HTML文件<form (ngSubmit)="addIngredients(f)"# f =“ngForm"比;

.ts文件@ViewChild('f'， {static: false})

在HTML中更新ngForm到ngForm对我有用

小开

如果你已经导入并添加了将要使用的子模块FormsModule和仍然面对错误，

<强> 1。你可能错过了添加根模块AppModule。(很傻，但有时会发生) 2. 确保你已经添加了相关的包，并在systemjs.config.js中引用了它