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

угловой 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 в приложении.модуль.ТС

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

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

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

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 в приложение.модуль.ts, по умолчанию ReactiveFormsModule будет унаследован всеми его дочерними модулями, такими как author.модуль в данном случае... (неверно!). Мне нужно было импортировать ReactiveFormsModule в author.модуль.ts для того, чтобы все директивы работали:

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

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

export class AuthorModule {}

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

предложенный ответ не работает для меня с угловых 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]
})

я столкнулся с этой ошибкой во время модульного тестирования компонента (только во время тестирования, в рамках приложения он работал нормально). Решение заключается в импорте ReactiveFormsModule in .spec.ts file:

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

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

имейте в виду, что если вы определили "модули функций", вам нужно будет импортировать в модуль функций, даже если вы уже импортировали в AppModule. Из угловой документации:

модули не наследуют доступ к компонентам, директивам или каналам, объявленным в других модулях. Какой модуль импорта не имеет отношения к ContactModule и наоборот. Прежде чем ContactComponent может связываться с [(ngModel)], его ContactModule должен импортировать FormsModule.

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

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

эта проблема возникает из-за отсутствия импорта FormsModule,ReactiveFormsModule .Я тоже пришел с той же проблемой. Мой случай был другим. как я работал с modules.So я пропустил выше импорт в моих родительских модулях, хотя я импортировал его в дочерние модули, он не работал.

затем я импортировал его в мои родительские модули, как показано ниже, и он работал!

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

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

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

ЕСЛИ ВЫ ДЕЛАЕТЕ ТЕСТИРОВАНИЕ,найти свой *.характеристики.файл TS и добавить :

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

немного Примечание: будьте осторожны с погрузчиками и минимизировать (Rails env.):

увидев эту ошибку и попробовав каждое решение, я понял, что с моим html-загрузчиком что-то не так.

Я установил свою среду Rails для импорта HTML-путей для моих компонентов успешно с помощью этого загрузчика (config/loaders/html.js.):

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

после нескольких часов усилий и бесчисленного количества импорта ReactiveFormsModule я увидел, что мой formGroup был маленьким письма:formgroup.

это привело меня к загрузчику и тому факту, что он снизил мой HTML на минимизацию.

после изменения параметров все работало так, как должно, и я снова мог плакать.

Я знаю, что это не ответ на вопрос, но для будущих посетителей Rails (и других с пользовательскими загрузчиками) я думаю, что это может быть полезно.

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

означает, что вы пытаетесь привязать свойство с помощью angular ([prop]) но угловой не может найти ничего, что он знает для этого элемента (в этом случае form).

это может произойти, если не использовать правильный модуль (отсутствует импорт где-то в пути), а иногда просто вызвать опечатку, например:

[formsGroup] С s после form