web-dev-qa-db-ja.com

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

状況：

助けてください！ Angular 2アプリケーションでは非常に単純なフォームにするようにしていますが、機能しないものは何でも構いません。

ANGULAR VERSION：

アンギュラ2.0.0 Rc5

エラー： 

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

enter image description here

コード：

景色：

<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 { }

質問：

なぜ私はそのエラーが出ますか？

私は何かが足りないのですか？

angulartypescriptangular2-forms
497
FrancescoMussi

RC5 FIX

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

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

RC6/RC7 /最終リリースFIX

このエラーを修正するには、モジュールの@angular/formsからReactiveFormsModuleをインポートするだけです。これはReactiveFormsModule importを使った基本モジュールの例です：

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の公式ドキュメントページ 。

965
Stefan Svrkota

機能モジュール と組み合わせた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 { }
106
Undrium

「掘った後、 'formGroup'にバインドできません。 'form'の既知のプロパティではない」という解決策を見つけました。

私の場合は、私は複数のモジュールファイルを使用してきました、私は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をインポートしてください。これが誰にでも役立つことを願っています。

76
Ashutosh Jha

コンポーネントの単体テスト中にこのエラーが発生しました（テスト中のみ、アプリケーション内では正常に機能しました）。解決策は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();
    }));
});
27
xuhcc

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

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

あなたが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]
})
14
sudheer nunna

私はAngular 7で同じ問題を抱えていました。app.module.tsファイルに以下をインポートするだけです。

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],
10
Chamila Maddumage

「フィーチャモジュール」を定義している場合は、すでにAppModuleにインポートしている場合でも、フィーチャモジュールにインポートする必要があります。 Angularのドキュメントから：

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

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

10
Ian Griffin

この問題は、FormsModule、ReactiveFormsModule .Iのインポートが欠落しているために発生します。同じ問題が発生しました。私の場合はdiffでした。モジュールを使って作業していたので、親モジュールでのインポートを見逃していましたが、子モジュールにインポートしていましたが、うまくいきませんでした。

それから私は以下のように私の親モジュールにそれをインポートし、そして それはうまくいった！ 

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

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

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

あなたがテストしているならば、 あなたの* .specs.tsファイルを見つけてください そして以下を加えてください：

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

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

5
GKooij

ちょっとしたメモ：ローダーに注意して最小化してください（Rails env。）：

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

私は、このローダー（config/loaders/html.js.）を使って、私のRails環境を私のコンポーネントのためのHTMLパスをうまくインポートするように設定しました。

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

数時間の努力と数え切れないほどのReactiveFormsModuleインポートの結果、私のformGroupは小文字であることがわかりました：formgroup。

これは私をローダーに導き、それが私のHTMLを最小化するのを引き下げたという事実に導きました。

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

私はこれが質問への答えではないことを知っています、しかし将来のRailsの訪問者にとって（そしてカスタムローダーを持つ他の人たち）私はこれが役に立つかもしれないと思います。

3
Peter Højlund Andersen

コンポーネントの開発時にこの問題が発生した場合、これらの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();
  });
});
3
Hamid

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ファイルに問題がある場合、コンパイル時エラーはスローされません。

2
DIBYA RANJAN TRIPATHY

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 { }
1
mojtaba ramezani

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

0
Leandro

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

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

これは正しいモジュールを使用しないことで起こり得（途中でインポートが欠けている）、時々ただのようなタイプミスを引き起こします：

sの後にformを付けた[formsGroup]

0
bresleveloper