Angular/NgForm/NgModel 指令错误：没有将“exportAs”设置为“ngForm”的指令

Posted 2023-03-13

【中文标题】Angular/NgForm/NgModel 指令错误：没有将“exportAs”设置为“ngForm”的指令

【英文标题】：Angular/ NgForm/NgModel directives error : There is no directive with "exportAs" set to "ngForm"

【发布时间】：2017-11-08 23:14:06

【问题描述】：

我有一个 asp.net core/Angular 项目。 在我的 app.module.client.ts 文件中，我正在导入“@angular/forms”，如下所示：

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  FormsModule  from '@angular/forms';
import  HttpModule  from '@angular/http';
import  sharedConfig  from './app.module.shared';

@NgModule(
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ...sharedConfig.imports
    ],
    providers: [
         provide: 'ORIGIN_URL', useValue: location.origin 
    ]
)
export class AppModule 

我的组件是这样配置的：

import  Component  from '@angular/core';
import  NgForm  from '@angular/forms';
import  Operator  from '../shared/operator.model';

@Component(
    selector: 'operator-form',
    template: require('./operator-form.component.html')
)

export class OperatorFormComponent 

    model = new Operator("Login", "Name", "Last name", "password");
    submitted = false;
    onSubmit()  this.submitted = true; 
    // TODO: Remove this when we're done
    get diagnostic()  return JSON.stringify(this.model); 

我的模板配置如下：

    <form  #formOperator="ngForm">
        <div class="form-group">
            <label for="login">Login</label>
            <input type="text" class="form-control" id="login" required [(ngModel)]="model.login" name="login" />
        </div>
        <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" id="firstName" required [(ngModel)]="model.firstName" name="firstName" />
        </div>
        <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName" required [(ngModel)]="model.lastName" name="lastName" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="text" class="form-control" id="password" required [(ngModel)]="model.password" name="password" />
        </div>
        <div class="form-group">
            <label for="expirationDate">Valid until</label>
            <input type="date" class="form-control" id="expirationDate" [(ngModel)]="model.validUntil" name="expirationDate" />
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
    </form>

不幸的是，我遇到了错误：没有将“exportAs”设置为“ngForm”的指令

有什么想法吗？

谢谢！

【问题讨论】：

表单模块未正确应用，如果您删除#formOperator="ngForm"，绑定是否有效？它不应该

@Maximus 我同意，就像表单模块没有加载一样。不，如果我删除指令 NgForm，绑定将不起作用。

【参考方案1】：

当您使用命令“dotnet new Angular”创建 Angular 项目时，app.module 分为三个文件：app.module.client.ts、app.module.server.ts 和 app.module.shared .ts.

为了正确导入包“@angular/forms”，您必须将其添加到 app.module.shared.ts 或添加到客户端和服务器文件中。