Question

我目前对如何解决此问题感到困惑。正如我从许多其他文章中发现的那样，解决此问题的常用方法是将 ReactiveFormsModule 和 FormsModule 导入 app.module.ts

我什至将它包含在其他使用反应形式的子模块中（ OrganisationFormComponent 和 TeamFormComponent ）。但是，我在Visual Studio Code终端中看到下面显示的错误。

无法绑定到“ formGroup”，因为它不是“ form”的已知属性。

...两次（对于单独的组件）。见： Errors In Console Screenshot

我也试图替换

[formGroup] =

到

formGroup =

但是这里没有运气。

当前错误不会允许我的表单正确提交，因此无法写入Firebase后端。

可以在此处找到GitHub Repo进行进一步分析：https://github.com/joeserve/CRUD-Project

OrganisationFormComponent

<div>
<h1>{{ !organisationId ? "Create Organisation" : "Edit Organisation" }}</h1>
<form [formGroup]="organisationForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" maxlength="20">
    </div>
    <button type="submit">Save</button>
</form>

TeamFormComponent

<div>
<h1>{{ !teamId ? "Create Team" : "Edit Team" }}</h1>
<form [formGroup]="teamForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" maxlength="20">
    </div>
    <button type="submit">Save</button>
</form>

组织模块

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { OrganisationFormComponent } from './organisation-form/organisation-form.component';
import { OrganisationRoutingModule } from './organisation-routing.module';
import { OrganisationComponent } from './organisation.component';

@NgModule({
declarations: [OrganisationComponent,OrganisationFormComponent],
exports: [OrganisationComponent,OrganisationFormComponent],
imports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule ,
    OrganisationRoutingModule,
    BrowserModule],
})
export class OrganisationModule{}

TeamModule

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { TeamFormComponent } from './team-form/team-form.component';
import { TeamRoutingModule } from './team-routing.module';
import { TeamComponent } from './team.component';
@NgModule({
declarations: [TeamComponent,TeamFormComponent],
exports: [TeamComponent,TeamFormComponent],
imports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule ,
    TeamRoutingModule,
    BrowserModule],
})
export class TeamModule{}

app.module.ts

@NgModule({
 declarations: [
   AppComponent,
   FleetComponent,
   UnitComponent,
   AgentComponent,
   HomeComponent,
   TeamComponent,
   StaffComponent,
   LoginComponent,
],
 imports: [
   BrowserModule,
   FormsModule, 
   ReactiveFormsModule,
   HttpClientModule,
   CommonModule,
   RouterModule, 
   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,
   AngularFireDatabaseModule,
   appRoutingModule,
 ],
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    // provider used to create fake backend
    fakeBackendProvider, <-- Not relevant
    OrganisationService,
    TeamService
],
bootstrap: [AppComponent]
})
export class AppModule { }

对于问题中出现的任何过多摘要或信息，我深表歉意

信息更新：

我在应用程序的两个模块中延迟加载：

app.routing.ts

 path: 'organisation', loadChildren: () => import('./organisation/organisation-routing.module').then(m => m.OrganisationRoutingModule)

organisation-routing.module.ts

path: ':organisationId/teams', loadChildren: () => import('./team/team-routing.module').then(m => m.TeamRoutingModule)

这可能是问题的根源吗？

Answer 1

这里的问题是您在延迟加载的路由中指向错误的模块：

app.routing.ts

{
  path: 'organisation',
  loadChildren: () => import('./organisation/organisation-routing.module')
                              .then(m => m.OrganisationRoutingModule) 
}

应为：

{
  path: 'organisation',
  loadChildren: () => import('./organisation/organisation.module')
                                   .then(m => m.OrganisationModule)
}

organization-routing.module.ts

{
  path: ':organisationId/teams',
  loadChildren: () => import('./team/team-routing.module').then(m => m.TeamRoutingModule)
},

应该是

{
  path: ':organisationId/teams',
  loadChildren: () => import('./team/team.module').then(m => m.TeamModule)
},

Angular Ivy：无法绑定到“ formGroup”，因为它不是“ form”的已知属性。但是导入了ReactiveFormsModule和FormsModule

1 个答案: