[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
2022-01-01 23:52:33
質問
プロジェクトでは、以下のようにTypeScriptのAngular2-formsフレームワークを使用しています。
プロジェクトの依存関係:
"dependencies": {
"@angular/common": "2.0.0-rc.6",
"@angular/compiler": "2.0.0-rc.6",
"@angular/core": "2.0.0-rc.6",
"@angular/forms": "2.0.0-rc.6",
"@angular/http": "2.0.0-rc.6",
"@angular/platform-browser": "2.0.0-rc.6",
"@angular/platform-browser-dynamic": "2.0.0-rc.6",
"@angular/router": "3.0.0-rc.2",
"ng2-bootstrap": "^1.1.1",
"reflect-metadata": "^0.1.8",
"core-js": "^2.4.0",
"es6-module-loader": "^0.17.8",
"rxjs": "5.0.0-beta.11",
"systemjs": "0.19.27",
"zone.js": "0.6.17",
"jquery": "3.0.0",
}
ログインテンプレートは以下の通りです。
<form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)">
</form>
ログインコンポーネント :
import { Component } from '@angular/core';
import {Http, Headers} from '@angular/http';
@Component({
moduleId: module.id,
selector: 'login-cmp',
templateUrl: 'login.component.html'
})
export class LoginComponent {
constructor($http: Http) {
this.$http = $http;
}
authenticate(data) {
...
}
}
それを実行すると、エラーが発生します。
zone.js?1474211973422:484 Unhandled Promise rejection: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<form [ERROR ->]#loginForm="ngForm"
(ngsubmit)="authenticate(loginForm.value)">
解決方法は?
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule //<----------make sure you have added this.
],
....
})
関連
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み] テスト
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み】Angular2エラー。exportAs "が "ngForm "に設定されたディレクティブは存在しません。
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueディレクティブv-bindの使用と注意点
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み] Angular 5:"ControlContainerのプロバイダがありません"
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。