TypeScript-のAngular Frameworkエラー-「exportAsがngFormに設定されているディレクティブはありません」

TypeScriptのAngular2フォームフレームワークを使用しているときに、このエラーが発生し続けます。

directive「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)">

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

@NgModule({
  imports: [
             BrowserModule,

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

FormsModuleルートAppModuleだけでなく、角度フォームディレクティブを使用するすべてのsubModuleにもインポートする必要があります。

// SubModule A

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

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

私はこれが古い投稿であることを知っていますが、私の解決策を共有したいと思います。このエラーを解決するために、インポート []配列に「ReactiveFormsModule」を追加しました

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

修正：

module.ts

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

 imports: [
    BrowserModule,
    FormsModule , 
    ReactiveFormsModule
  ],

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

@NgModule({
  imports: [FormsModule],
  ...
})

（誰かが私のように盲目だった場合に備えて） 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>

名前が次のように割り当てられている場合：

#editForm="testForm"

... exportAsはコンポーネントデコレータで定義する必要があります。

selector: 'test-form',
templateUrl: './test-form.component.html',
styleUrls: ['./test-form.component.scss'],
exportAs: 'testForm'

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>

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

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

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

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

       **exports:[FormsModule],**

   したがって、まとめると imports：[CommonModule、HttpModule、FormsModule]、exports：[FormsModule]、

3. トップでは、FormsModuleをインポートする必要があります

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

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

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

私はこの問題に直面しましたが、ここでの答えはどれもうまくいきませんでした。私はググってみたFormsModule not shared with Feature Modules

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

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

ログインコンポーネントのtsファイルにフォームモジュールをインポートすることに加えて、NgFormもインポートする必要があります。

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

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

import { FormsModule,ReactiveFormsModule }from'@angular/forms';

imports:[
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule/*This one in particular*/,...
],

app.module.tsでのようなエラーを永久に解決し"cannot bind [formGroup] or no directive with export as"ます。

この

<div #myForm="ngForm"></div>

また、エラーが発生し、ngFormディレクティブを含めることで修正できます。

<div ngForm #myForm="ngForm"></div>

私も同じ理由で何度も何度もこの同じ質問にくるようになりました。それで、私が何が悪かったのかを言ってこれに答えましょう。誰かのために役立つかもしれません。

angular-cliコマンドでコンポーネントを作成していた

ng GCコンポーネント/何か/何か

それがしたことは、私が望むようにコンポーネントを作成したことです。

また、コンポーネントの作成中に、App Moduleの宣言配列にコンポーネントを追加しました。

この場合は削除してください。そして出来上がり！うまくいくかもしれません。

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

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

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

実行した場合は、入力フィールドからformControlName = 'whatever'を削除するだけです。

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

私の場合ngNoForm、<form>タグから属性を削除する必要がありました。

アプリケーションにFormsModuleをインポートしたいが特定のフォームをスキップしたい場合、ngFormがフォームに追加されないようにするngNoFormディレクティブを使用できます。

リファレンス：https : //www.techiediaries.com/angular-ngform-ngnoform-template-reference-variable/

ルーティングモジュールを移動しました。つまり、ARoutingModuleをFormsModuleおよびReactiveFormsModuleの上に移動し、CommonModuleの後にモジュールの配列をインポートしました。

正しいモジュールをインポートするだけで、

「FormsModule」

import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule //<---.
  ],
  ....
})

このエラーは、ジャスミンを使用して角度でユニットテストケースを記述しようとした場合にも発生します。

このエラーの基本概念はimport FormsModuleです。したがって、単体テスト用のファイルにimportsセクションを追加し、FormsModuleをそのファイルの下の

    TestBed.configureTestingModule
    For eg: 
    TestBed.configureTestingModule({
        declarations: [ XYZComponent ],
        **imports: [FormsModule]**,
    }).compileComponents();

私は同じ問題を抱えており、次のコマンドですべての依存関係（package.json）を更新することで解決しました npm update -D && npm update -S

@GünterZöchbauerが指摘したように、必ずFormsModuleを最初にインクルードしてください。