Angular - 无法绑定到 'formGroup'，因为它不是 'form' 的已知 属性

Question

我使用 2 moodule 创建了新应用程序，当我尝试将表单添加到我的模块之一时出现错误：

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

我知道这是一个很常见的问题，所以我 google 在写这张票之前确保我的模块中有 ReactiveFormsModule。但我仍然看到一个错误，所以问题显然存在，因为这是我的代码：

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

在 App modul 中，一切正常，如果我尝试在那里制作表格，一切正常。

// auth.module.ts
@NgModule({
  imports: [CommonModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}

在我的 LoginComponent（在 AuthModule 中注册我有这样的代码：

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}
  public ngOnInit(): void {
    this.form = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', Validators.required],
    });
  }

我的模板很简单：

<form [formGroup]="form"></form>

我验证了数百万次我在我的两个模块中都导入了 ReactiveFormsModule 并且我已经保存了所有内容。我多次重新启动 CLI 以确保它没有在某处冻结。

我不知道我做错了什么。

Answer 1

您需要在 AuthModule

中导入 BOTH FormsModule 和 ReactiveFormsModule

// auth.module.ts
@NgModule({
  imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}

Answer 2

您应该将 AuthModule 导入您的 AppModule。 Refer Documentation

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    AuthModule
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}