「form」の既知のプロパティではないため、「formGroup」にバインドできません

状況：

助けてください！私はAngular2アプリで非常にシンプルなフォームを作成しようとしていますが、何が機能するかは関係ありません。

角度バージョン：

Angular 2.0.0 Rc5

エラー：

Can't bind to 'formGroup' since it isn't a known property of 'form'

コード：

景色：

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

コントローラ：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    } 
}

ngModule：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

質問：

なぜそのエラーが出るのですか？

何か不足していますか？

RC5修正

あなたはする必要がありimport { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'、あなたのコントローラ内とにそれを追加directivesで@Component。これで問題が解決します。

これを修正すると、formControlName="name"フォームの入力に追加しなかったため、おそらく別のエラーが発生します。

RC6 / RC7 /最終リリースFIX

このエラーを修正するには、モジュールReactiveFormsModuleからインポートする必要があり@angular/formsます。以下は、ReactiveFormsModuleインポート付きの基本モジュールの例です。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

さらに説明するformGroupとFormGroupDirective、はの一部であるという名前のディレクティブのセレクタReactiveFormsModuleであるため、インポートする必要があります。既存のものFormGroupをDOM要素にバインドするために使用されます。詳細については、Angularの公式ドキュメントページをご覧ください。

Angular 4を機能モジュールと組み合わせて（たとえば、共有モジュールを使用している場合）、ReactiveFormsModuleを機能させるためにエクスポートする必要もあります。

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 

調べてみたところ、「form」の既知のプロパティではないため、「formGroup」にバインドできない」という解決策が見つかりました。

私の場合、私は複数のモジュールファイルを使用しており、app.module.tsにReactiveFormsModuleを追加しました

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

しかし、別のモジュールに追加されたコンポーネントから[formGroup]ディレクティブを使用すると、これは機能しませんでした。たとえば、author.module.tsファイルでサブスクライブされているauthor.component.tsで[formGroup]を使用します。

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

App.module.tsにReactiveFormsModuleを追加した場合、デフォルトではReactiveFormsModuleは、この場合はauthor.moduleのようなすべての子モジュールに継承されます...（間違っています）。すべてのディレクティブを機能させるために、author.module.tsにReactiveFormsModuleをインポートする必要がありました。

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

したがって、サブモジュールを使用している場合は、必ず各サブモジュールファイルにReactiveFormsModuleをインポートしてください。これが誰にも役立つことを願っています。

コンポーネントの単体テスト中にこのエラーが発生しました（テスト中にのみ、アプリケーション内で正常に動作しました）。解決策はファイルにインポートReactiveFormsModuleすること.spec.tsです：

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});

Angular 4では、提案された回答が機能しませんでした。代わりに、接頭辞付きの属性バインディングの別の方法を使用する必要がありましたattr。

<element [attr.attribute-to-bind]="someValue">

2つのモジュールをインポートする必要がある場合は、以下のように追加します

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

「機能モジュール」を定義している場合は、すでににインポートしている場合でも、機能モジュールにインポートする必要があることに注意してくださいAppModule。Angularのドキュメントから：

モジュールは、他のモジュールで宣言されているコンポーネント、ディレクティブ、またはパイプへのアクセスを継承しません。AppModuleがインポートするものはContactModuleとは無関係で、その逆も同様です。ContactComponentが[（ngModel）]とバインドする前に、そのContactModuleがFormsModuleをインポートする必要があります。

https://angular.io/docs/ts/latest/guide/ngmodule.html

エラーは、FormGroupがこのモジュールで認識されないことを示しています。したがって、FormGroupを使用するすべてのモジュールにこれら（以下）のモジュールをインポートする必要があります

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

次に、FormsModuleとReactiveFormsModuleをモジュールのインポート配列に追加します。

imports: [
  FormsModule,
  ReactiveFormsModule
],

AppModuleに既に追加していて、それを継承する必要があるとお考えですか？そうではありません。これらのモジュールは、モジュールのインポートでのみ使用可能な必須ディレクティブをエクスポートしているためです。詳細はこちら... https://angular.io/guide/sharing-ngmodules。

これらのエラーの他の要因は、以下のようなスペルエラーかもしれません...

[FormGroup] = "form"小文字のfではなく 大文字のF

[formsGroup] = "form"フォームの後の 追加のs

Angular 7でも同じ問題が発生しました。次のコードをapp.module.tsファイルにインポートしてください。

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

次に、FormsModuleとReactiveFormsModuleをインポート配列に追加します。

imports: [
  FormsModule,
  ReactiveFormsModule
],

この問題は、FormsModule、ReactiveFormsModuleのインポートが欠落しているために発生します。同じ問題も発生しました。私の場合は違いました。モジュールを使用していたので、子モジュールにインポートしたにもかかわらず、親モジュールのインポートに失敗しました。

次に、以下のように親モジュールにインポートしました。

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })

このエラーについてこれらのスレッドを散歩している人々のために。私の場合、共有モジュールがあり、FormsModuleとReactiveFormsModuleのみをエクスポートし、インポートするのを忘れていました。これにより、フォームグループがサブコンポーネントで機能しないという奇妙なエラーが発生しました。これが人々の頭を掻くのに役立つことを願っています。

e2eテストを実行しようとしたときにこのエラーに遭遇しましたが、これに対する答えがないことに夢中になりました。

テストを行っている場合は、*。specs.tsファイルを見つけて追加します。

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

少し注意：ローダーに注意して最小化してください（Rails環境）：

このエラーを見て、そこにあるすべての解決策を試した後、htmlローダーに問題があることに気付きました。

このローダーを使用してコンポーネントのHTMLパスを正常にインポートするようにRails環境を設定しました（config/loaders/html.js.）：

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

数時間の努力と無数のReactiveFormsModuleインポートの後、私formGroupは自分が小文字であることがわかりましたformgroup。

これは私をローダーに導き、それが最小化時に私のHTMLをダウンケースにしたという事実につながりました。

オプションを変更した後、すべてが正常に機能し、再び泣くことができました。

これが質問への回答ではないことは知っていますが、将来のRails訪問者（およびカスタムローダーを使用する他の訪問者）にとって、これは役立つと思います。

REACTIVE_FORM_DIRECTIVESの使用とインポート：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

コンポーネントの開発時にこの問題が発生した場合は、これらの2つのモジュールを最も近いモジュールに追加する必要があります。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

また、コンポーネントのテストを開発している場合は、このモジュールを次のようにテストファイルに追加する必要があります。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

対応するモジュールにReactiveFormsModuleをインポートします

簡単な解決策：

ステップ1：ReactiveFormModuleをインポートする

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

手順2：インポートセクションに「ReactiveFormsModule」を追加する

imports: [

    ReactiveFormsModule
  ]

手順3：アプリを再起動して完了

例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

ReactiveFormsModuleをインポートしてapp.module.tsに登録します。

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

.tsファイルと.htmlファイルの両方でスペルが正しいことを確認してください。xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.htmlファイル-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

私は誤って[FormGroup]を[formGroup]と書いていた。.htmlのスペルを正しく確認してください。.htmlファイルに問題がある場合でも、コンパイル時エラーはスローされません。

注：子モジュールのコンポーネント内で作業している場合、親アプリのルートモジュールではなく子モジュールにReactiveFormsModuleをインポートするだけで済みます。

私のように馬鹿にしないでください。上記と同じエラーが発生していましたが、このスレッドのオプションはどれも機能しませんでした。次に、FormGroupで「F」を大文字にしたことに気付きました。どー！

の代わりに：

[FormGroup]="form"

行う：

[formGroup]="form"

これが単なるtypescriptエラーであるが、フォーム上のすべてが機能する場合は、IDEを再起動する必要があるだけかもしれません。

同じ問題がありましたが、サブモジュールを使用している場合（たとえば、app.component.module.tsだけでなく、login.module.tsなどの別のコンポーネントもあり、このログインに ReactiveFormsModule importを含めていることを確認してください。.module.ts import、それが機能するために、すべてにサブモジュールを使用しているため、app.component.moduleにReactiveFormsModuleをインポートする必要すらありません。

login.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

誰かを助けるかもしれない：

モーダル（entrycomponent）にformGroupがある場合、モーダルがインスタンス化されるモジュールにもReactiveFormsModuleをインポートする必要があります。

Can't bind to 'formGroup' since it isn't a known property of 'form'

は、angular（[prop]）を使用してプロパティをバインドしようとしましたが、angular はその要素について彼が知っているものを見つけることができません（この場合）form）。

これは、適切なモジュールを使用しないことで発生する可能性があり（途中でインポートが見つからない）、次のようなタイプミスが発生することがあります。

[formsGroup]、s後にform

私の解決策は微妙で、リストに表示されていませんでした。

で宣言されていないAngular Materials Dialogコンポーネントで反応フォームを使用していましたapp.module.ts。メインコンポーネントはで宣言されapp.module.ts、ダイアログコンポーネントを開きますが、ダイアログコンポーネントは明示的に宣言されていませんapp.module.ts。

ダイアログを開くたびにフォームがこのエラーをスローすることを除いて、通常はダイアログコンポーネントの使用に問題はありませんでした。

Can't bind to 'formGroup' since it isn't a known property of 'form'.

まず、Angularバージョン> 2とは関係ありません。app.module.tsファイルに以下をインポートするだけで問題が解決します。

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

次に、FormsModuleとReactiveFormsModuleをインポート配列に追加します。

imports: [
  FormsModule,
  ReactiveFormsModule
],

注：ReactiveFormsModule代わりに特定のモジュールにインポートすることもできますapp.module.ts

モジュールをAppModuleすべてに追加すると、すべて正常に動作し始めました。