无法绑定到 'formGroup'，因为在使用 SharedModule 时它不是 'form' 的已知属性

Question

我遇到这个错误很多次了，而且我总是能够修复它，但我想这次我忽略了一些东西，我无法让它发挥作用。

如标题所述，对于以下代码行，我得到的错误是 Can't bind to 'formGroup' since it isn't a known property of 'form'.：<form [formGroup]="contactSettings">.

我已经检查了所有 Whosebug 帖子，但它们都归结为将 ReactiveFormsModule 添加到使用 ReactiveForms 的模块中。在我的例子中，也在各种 Whosebug 帖子中，我应该在我的 SharedModule 中导出 ReactiveFormsModule 并在我的 ContactModule 中导入 SharedModule 实际上使用 ReactiveFormsModule.我不明白我做错了什么。

contact-settings.component.html

<form [formGroup]="contactSettings">

</form>

contact-settings.component.ts

export class ContactSettingsComponent extends FormComponent {

  contactSettings: FormGroup = this.fb.group({ //Moving this to constructor or onInit does not fix it
    firstName: ["First name"],
    lastName: ["Last name"],
    emailAdress: ["email", Validators.email],
    gender: ["male"],
    parentCustomerId: ["Parent customer name"],
    language: ["Language"],
    telephone: ["Telephone number"],
    mobilephone: ["Mobile phone number"],
  });

  constructor(private fb: FormBuilder, private contactService: ContactService) {
    super();
  }
}

contact.module.ts

... //imports

@NgModule({
  declarations: [
    ContactSettingsComponent
  ],
  imports: [
    ContactRoutingModule,
    SharedMaterialModule, // <--- contains export ReactiveFormsModule and FormsModule
    SharedComponentsModule
  ]
})
export class ContactModule { }

shared-material.module.ts

... //Angular Material imports

//CommonModule
import { CommonModule } from "@angular/common";

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

//Browser
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  //Normally imports are here, but the template I bought does not have this and adding it doesn't fix it either. It worked normally before.
  exports: [
    //CommonModule
    CommonModule,
    //Browser animations
    BrowserModule,
    BrowserAnimationsModule,
    //Forms
    ReactiveFormsModule, // <--- clearly present here
    FormsModule,
    //Angular Material Modules
    ...
  ]
})

export class SharedMaterialModule {}

Answer 1

我的导入非常完美。问题是我的 ContactModule 从未在任何其他模块中使用过。我必须通过将以下代码块添加到我的应用程序来加载 ContactModule -routing.module.

      {
        path: 'contact',
        loadChildren: () => import('./views/contact/contact.module').then(m => m.ContactModule)
      }

无法绑定到 'formGroup'，因为在使用 SharedModule 时它不是 'form' 的已知属性

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

angular-reactive-forms

formgroups

angular9

无法绑定到 'formGroup'，因为在使用 SharedModule 时它不是 'form' 的已知 属性

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

angular-reactive-forms

formgroups

angular9

无法绑定到 'formGroup'，因为在使用 SharedModule 时它不是 'form' 的已知属性