Nie można powiązać z 'formGroup', ponieważ nie jest to znana właściwość 'form'

Angular 4 w połączeniu z feature modules (jeśli na przykład używasz shared-module) wymaga również eksportu ReactiveFormsModule do pracy.

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

Ok po pewnym kopaniu znalazłem rozwiązanie "nie można powiązać z 'formGroup', ponieważ nie jest to znana właściwość 'form'."

W moim przypadku używałem wielu plików modułów, dodałem ReactiveFormsModule w aplikacji.moduł.ts

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

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

Ale to nie działało, gdy używam dyrektywy [formGroup] z komponentu dodanego w innym module, np. używając [formGroup] w author.komponent.ts, który jest subskrybowany w author.moduł.plik 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 {}

Pomyślałem, że jeśli dodam ReactiveFormsModule w aplikacji.moduł.ts, domyślnie ReactiveFormsModule będzie dziedziczone przez wszystkie jego moduły potomne, takie jak author.moduł w tym przypadku... (źle!). Potrzebowałem zaimportować ReactiveFormsModule w author.moduł.ts, aby wszystkie dyrektywy działały:

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

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

export class AuthorModule {}

Więc jeśli używasz modułów podrzędnych, upewnij się, że zaimportujesz ReactiveFormsModule do każdego pliku podrzędnego. Mam nadzieję, że to komuś pomoże.

Napotkałem ten błąd podczas testowania jednostkowego komponentu (tylko podczas testowania, w ramach aplikacji działał normalnie). Rozwiązaniem jest zaimportowanie ReactiveFormsModule do pliku .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();
    }));
});

Sugerowana odpowiedź nie zadziałała dla mnie z Angular 4. Zamiast tego musiałem użyć innego sposobu wiązania atrybutów z prefiksem attr:

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

Błąd mówi, że FormGroup nie jest rozpoznawany w tym module. Więc musisz zaimportować te (poniżej) moduły do każdego modułu , który używa FormGroup

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

Następnie dodaj FormsModule i ReactiveFormsModule do tablicy importów modułu.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Być może myślisz, że dodałem go już w AppModule i powinien odziedziczyć po nim? Ale tak nie jest. ponieważ moduły te eksportują wymagane dyrektywy, które są dostępne tylko w importowanie modułów. Czytaj więcej tutaj... https://angular.io/guide/sharing-ngmodules .

Innymi czynnikami tych błędów może być błąd pisowni, jak poniżej...

[FormGroup]= "form" Capital F zamiast small f

[formsGroup] = "formularz" Extra S po formularzu

Jeśli musisz zaimportować dwa moduły, dodaj Tak poniżej

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]
})

Pamiętaj, że jeśli zdefiniowałeś "Moduły funkcji", będziesz musiał zaimportować moduł funkcji, nawet jeśli zaimportowałeś go już do AppModule. Z Dokumentacji kątowej:

Moduły nie dziedziczą dostępu do komponentów, dyrektyw lub rur zadeklarowanych w innych modułach. Import AppModule nie ma znaczenia dla ContactModule i vice versa. Zanim ContactComponent może związać się z [(ngModel)], jego ContactModule musi zaimportować FormsModule.

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

Miałem ten sam problem z Angular 7. Wystarczy zaimportować następujące w aplikacji.moduł.plik ts.

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

Następnie dodaj FormsModule i ReactiveFormsModule do tablicy importów.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Ten problem występuje z powodu braku importu FormsModule, ReactiveFormsModule .Też przyszedłem z tym samym problemem. Moja sprawa była różna. jak pracowałam z modules.So przegapiłem powyższy import w moich modułach macierzystych, chociaż zaimportowałem go do modułów potomnych, nie działało.

Następnie zaimportowałem go do moich modułów macierzystych, jak poniżej, i zadziałało!

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

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

Natknąłem się na ten błąd podczas testów e2e i doprowadzało mnie to do szaleństwa, że nie ma na to odpowiedzi.

Jeśli robisz testy, znajdź swoje *.specyfikacje.plik ts {[5] } i dodaj:

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

Dla osób poruszających te wątki o tym błędzie. W moim przypadku miałem współdzielony moduł, w którym wyeksportowałem tylko FormsModule i ReactiveFormsModule i zapomniałem go zaimportować. Spowodowało to dziwny błąd, że formgroups nie działały w komponentach podrzędnych. Mam nadzieję, że to pomoże ludziom drapać się po głowach.

Mała uwaga: uważaj na Ładowarki i minimalizuj (szyny env.):

Po zobaczeniu tego błędu i wypróbowaniu każdego rozwiązania, zdałem sobie sprawę, że coś jest nie tak z moim html loaderem.

Ustawiłem moje środowisko Rails tak, aby z powodzeniem importować ścieżki HTML dla moich komponentów za pomocą tego loadera (config/loaders/html.js.):

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

Po kilku godzinach starań i niezliczonych reaktywnych importach Module zobaczyłem, że moje formGroup to małe litery: formgroup.

Po zmianie opcji, wszystko działało tak, jak powinno, i mogłem wrócić do płaczu.

Wiem, że to nie jest odpowiedź na pytanie, ale dla przyszłych odwiedzających Rails (i innych z niestandardowymi ładowarkami) myślę, że może to być pomocne.

Importuj i zarejestruj ReactiveFormsModule w swojej aplikacji.moduł.ts.

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

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

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

Upewnij się, że pisownia jest poprawna w obu .ts i .plik html. xxx. ts

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

Xxx.html plik -

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

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

Przez pomyłkę napisałem [FormGroup] z [formGroup]. Sprawdź poprawną pisownię .html. Nie wyrzuca błędu czasu kompilacji, jeśli coś jest nie tak .plik html.

Using and import 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 { }

Jeśli masz ten problem podczas tworzenia komponentu, więc powinieneś dodać te dwa moduły do najbliższego modułu:

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

I jeśli tworzysz test dla swoich komponentów, powinieneś dodać ten moduł do pliku testowego w następujący sposób:

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();
  });
});

Import ReactiveFormsModule w module

Proste rozwiązanie:

Krok 1: import ReactiveFormModule

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

Krok 2: Dodaj "ReactiveFormsModule" do sekcji import

imports: [

    ReactiveFormsModule
  ]

Krok 3: Uruchom ponownie aplikację i gotowe

Przykład:

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

Uwaga : jeśli pracujesz wewnątrz komponentu modułu potomnego, musisz zaimportować ReactiveFormsModule w module potomnym, a nie w głównym module aplikacji nadrzędnej

Miałem ten sam problem, upewnij się, że jeśli używasz podmodułów (na przykład masz nie tylko aplikację.komponent.moduł.ts, ale masz osobny komponent, taki jak login.moduł.ts, że zawiera ReactiveFormsModule import w tym login.moduł.ts import, aby zadziałało. Nie muszę nawet importować ReactiveFormsModule do mojej aplikacji.komponent.moduł, ponieważ używam podmodułów do wszystkiego.

Login.moduł.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 {}

Może komuś pomóc:

Jeśli masz formGroup w modalu (entrycomponent), wtedy musisz zaimportować ReactiveFormsModule również w module, w którym jest utworzona instancja modalu.

Nie bądź taki głupi jak ja. Otrzymywał ten sam błąd jak powyżej, żadna z opcji w tym wątku nie działała. Potem zdałem sobie sprawę, że pisałem wielką literą " F " W FormGroup. Doh!

Zamiast:

[FormGroup]="form"

Do:

[formGroup]="form"

Jeśli jest to tylko błąd maszynopisu, ale wszystko w formularzu działa, być może będziesz musiał ponownie uruchomić IDE

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

Oznacza, że próbujesz powiązać właściwość za pomocą angular ([prop]), ale angular nie może znaleźć niczego, co wie dla tego elementu(w tym przypadku form).

Może się to zdarzyć, jeśli nie użyjesz odpowiedniego modułu (brakuje importu gdzieś w drodze), a czasami po prostu spowodujesz literówkę w stylu:

[formsGroup], z s po form

Po pierwsze, nie jest związany z wersjami kątowymi > 2 . Wystarczy zaimportować następujące w aplikacji.moduł.plik ts naprawi problemy.

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

Następnie dodaj FormsModule i ReactiveFormsModule do tablicy importów.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Uwaga : Możesz również zaimportować ReactiveFormsModule do określonego modułu zamiast app.module.ts

Zmagałem się z tym błędem w ciągu ostatnich 3 dni. Dodałem ReactiveFormsModule i FormsModule jak wspomniano w komentarzach powyżej w obu moich modułach, ale nie miało to żadnego wpływu, dopóki nie załadowałem mojego projektu innym "ng serve". Nie wiem, dlaczego nie przeładował się automatycznie, ale przynajmniej cieszę się, że w końcu zadziałało! Jakieś wyjaśnienie?

Musisz zaimportować FormsModule, ReactiveFormsModule w tym module jak i na najwyższym poziomie.

Jeśli użyłeś reactiveForm w innym module, musisz wykonać również ten krok wraz z powyższym krokiem: zaimportuj również reactiveFormsModule w tym konkretnym module.

Na przykład:

imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  AppRoutingModule,
  HttpClientModule,
  BrowserAnimationsModule
],

Import {FormsModule, ReactiveFormsModule} z '@ angular/forms'; i dodać go w tablicy importu w App-module.plik ts.

Możesz otrzymać ten Komunikat o błędzie, nawet jeśli zaimportowałeś już FormsModule i ReactiveFormsModule. Przeniosłem komponent (który używa dyrektywy [formGroup]) z jednego projektu do drugiego, ale nie udało mi się dodać komponentu do tablicy declarations w nowym module. Spowodowało to Komunikat o błędzie Can't bind to 'formGroup' since it isn't a known property of 'form'.

Moje rozwiązanie było subtelne i nie widziałem go na liście.

Używałem form reaktywnych w komponencie dialogowym materiałów kątowych, który nie został zadeklarowany w app.module.ts. Główny komponent został zadeklarowany w app.module.ts i otworzy komponent dialogowy, ale komponent dialogowy nie został jawnie zadeklarowany w app.module.ts.

Nie miałem żadnych problemów z używaniem komponentu dialog normalnie z wyjątkiem tego, że formularz rzucił ten błąd, gdy otwierałem okno dialogowe.

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