2017-06-07 19 views
0

私はasp.net core/Angularプロジェクトを持っています。私app.module.client.tsファイルで 、私は以下のように '@角度/フォーム' インポートしています:私のコンポーネントは、このように構成されてAngular/NgForm/NgModelディレクティブエラー: "exportAs"が "ngForm"に設定されているディレクティブがありません。

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>

残念ながら、私はエラーを持っている: "ngForm" に設定された "EXPORTAS"

任意のアイデアとはディレクティブがありませんか?

ありがとうございます!

+0

formsモジュールが正しく適用されなかった場合、 '#formOperator =" ngForm "'を削除するとバインディングは機能しますか? –

+0

@ Maximus私は同意する、それは、フォームモジュールが読み込まれないようです。いいえ、NgFormディレクティブを削除してもバインディングは機能しません。 –

答えて

0

"dotnet new Angular"コマンドで角度プロジェクトを作成すると、app.moduleはapp.module.client.ts、app.module.server.ts、app.moduleの3つのファイルに分割されます。 shared.ts。

'@ angular/forms'パッケージを正しくインポートするには、app.module.shared.tsにパッケージを追加するか、クライアントとサーバーファイルにパッケージを追加する必要があります。

関連する問題