Невозможно привязать к formGroup, так как это не известное свойство form

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

Хорошо после некоторого рытья я нашел решение для "Не могу привязываться к" formGroup ", так как это не известное свойство" формы "."

В моем случае я использовал несколько файлов модулей, я добавил ReactiveFormsModule в app.module.ts

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

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

Но это не сработало, когда я использую директиву [formGroup] из компонента, добавленного в другом модуле, например. используя [formGroup] в author.component.ts, подписанный в файле author.module.ts:

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

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

export class AuthorModule {}

Я думал, что если бы я добавил ReactiveFormsModule в app.module.ts, по умолчанию ReactiveFormsModule наследуется всеми его дочерними модулями, такими как author.module, в этом случае... (неправильно!). Мне нужно было импортировать ReactiveFormsModule в author.module.ts, чтобы заставить все директивы работать:

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

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

export class AuthorModule {}

Итак, если вы используете подмодули, обязательно импортируйте ReactiveFormsModule в каждый файл подмодуля. Надеюсь, это поможет любому.

Предлагаемый ответ не работал у меня с Angular 4. Вместо этого мне пришлось использовать другой способ привязки атрибута с помощью attr префикс:

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

Если у вас есть два модуля, добавьте их так:

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

Для людей, прогуливающих эти потоки об этой ошибке. В моем случае у меня был общий модуль, в котором я экспортировал только FormsModule и ReactiveFormsModule и забыл его импортировать. Это вызвало странную ошибку, что formgroups не работали в подкомпонентах. Надеюсь, это поможет людям почесывать головы.

Я столкнулся с этой ошибкой во время модульного тестирования компонента (только во время тестирования, в приложении он работал нормально). Решение состоит в том, чтобы импортировать файл 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();
    }));
});

Я сталкивался с этой ошибкой при попытке тестирования e2e, и это сводило меня с ума, что на это не было ответов.

ЕСЛИ ВЫ ИДЕТЕ ИСПЫТАНИЕ, найдите свой файл *.specs.ts и добавьте:

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

Я только что сделал [formsGroup], с s после form, поэтому фол...