web-dev-qa-db-ja.com

"exportAs"を "ngForm"に設定したディレクティブはありません

このプロジェクトの依存関係を持つ：

  "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)">
angularangular2-forms
162
Nassim MOUALEK
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [
             BrowserModule,

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

あなたはFormsModuleをルートのAppModule だけでなく、すべてのサブフォーム にも使用する必要があります。

// SubModule A

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

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

これは古い投稿ですが、私の解決策を共有したいと思います。このエラーを解決するために、 imports []配列に " ReactiveFormsModule "を追加しました。

エラー： "exportAs"が "ngForm"（ "）に設定されているディレクティブがありません

修正：

module.ts

'@ angular/forms'から{FormsModule、 ReactiveFormsModule }をインポート

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],
29
Shakeer Hussain
import { FormsModule }   from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  ...
})
12
Günter Zöchbauer

（念のために、他の誰かが私のように目が見えないようにします）form _ ftw _ ！ <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>
6
seven

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>
5
Md Ayub Ali Sarker

あなたが気をつけなければならない二つのこと..

  1. サブモジュールを使用している場合は、そのサブモジュールにFormModuleをインポートする必要があります。

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

  2. モジュールでFormModuleをエクスポートする必要があります

        **exports:[FormsModule],**

    そのため、 imports：[CommonModule、HttpModule、FormsModule]、エクスポート：[FormsModule]、 のようになります。

  3. トップに戻るu FormsModuleをインポートする必要があります

    '@ angular/forms'から{FormsModule}をインポートします。

app.module.tsのみを使用している場合

エクスポートする必要はありません。インポートのみが必要です

2
shajahan

私はこの問題に直面しました、しかしここでの答えのどれも私のために働きませんでした。グーグルしたところ、FormsModule not shared with Feature Modulesが見つかりました。

そのため、あなたのフォームが注目のモジュールの中にある場合は、そこにFromsModuleをインポートして追加する必要があります。

参照してください： https://github.com/angular/angular /issues/11365

1
Prasanth Bendra

FormsModuleをインポートしてからインポートのセクションに配置する必要があります。

import { FormsModule } from '@angular/forms';
0
Ricardo Tovar

モジュールをインポートしていなければ単純で、インポートして '@ angular/forms'からimport {FormsModule}を宣言します。

もしそうなら、入力フィールドから formControlName = 'whatever' を削除するだけです。

0
Hasnain Ali Sohrani

あなたはctrl + cでアプリを終了し、ng serveでそれを再実行するべきです、あなたがあなたにFormsModuleを含めなかった場合、app.moduleファイルをインポートし、後でそれを追加し、angleはそれを知らない、それはモジュールを再スキャンしませんそれはそれがテンプレートドライブのアプローチのすべての機能が含まれるものの後に、角度が新しいモジュールが含まれていることを見ることができるように、あなたはアプリを再起動する必要があります

0
Artur O

ログインコンポーネントのtsファイルにフォームモジュールをインポートするだけでなく、NgFormもインポートする必要があります。

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

これで私の問題は解決しました

0
Jo Paul