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

【问题标题】：Angular/ NgForm/NgModel directives error : There is no directive with "exportAs" set to "ngForm"Angular/NgForm/NgModel 指令错误：没有将“exportAs”设置为“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，绑定将不起作用。

标签： angular

【解决方案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 或添加到客户端和服务器文件中。

【讨论】：