Блог

У меня было все в моем приложении в одном файле app.module.ts, все работало отлично, однако я пытаюсь реорганизовать все по модулям (core, shared, feature), но у меня ошибка в моем функциональном компоненте, который использует реактивную форму

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

Я предполагаю, что это ошибка при импорте, но я не знаю, что именно я делаю неправильно.

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';

/* App modules */
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { AuthModule } from './auth/auth.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    RxReactiveFormsModule,
    CoreModule,
    AppRoutingModule,
    AuthModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

core.module.ts

 import {NgModule, Optional, SkipSelf} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { RegisterService } from './services/auth/register.service';
import { LoginService } from './services/auth/login.service';
import { RecoveryService } from './services/auth/recovery.service';
import 'hammerjs';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    HttpClientModule
  ],
  providers: [
    RegisterService,
    LoginService,
    RecoveryService
  ]
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule){
      throw new Error(
        'CoreModule is already loaded. Import it in AppModule only'
      );
    }
  }
}

 

shared.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PrimengModule } from './primeng.module';
import { NavigationComponent } from './navigation/navigation.component';
import { FooterComponent } from './footer/footer.component';
import { NotFoundComponent } from '../core/errors/not-found/not-found.component';
import { ServerDisconnectedComponent } from '../core/errors/server-disconnected/server-disconnected.component';

@NgModule({
  declarations: [
    NavigationComponent,
    FooterComponent,
    NotFoundComponent,
    ServerDisconnectedComponent,
  ],
  imports: [
    CommonModule,
    PrimengModule
  ]
})
export class SharedModule { }

 

auth.module.ts

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { AuthRoutingModule } from './auth-routing.module';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { AccountComponent } from './register/account/account.component';
import { ContactComponent } from './register/contact/contact.component';
import { StatusComponent } from './register/status/status.component';
import { FamilyComponent } from './register/family/family.component';
import { RecoveryComponent } from './recovery/recovery.component';
import { ChangeComponent } from './recovery/change/change.component';

@NgModule({
  declarations: [
    LoginComponent,
    RegisterComponent,
    AccountComponent,
    ContactComponent,
    StatusComponent,
    FamilyComponent,
    RecoveryComponent,
    ChangeComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    AuthRoutingModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AuthModule { }

 

Вам нужно импортировать FormsModule (и, вероятно ReactiveFormsModule ) в каждый используемый модуль formGroup , я не уверен, какой из ваших функциональных модулей, но это модуль, в котором импорт отсутствует