javascript - 导入 ReactiveFormsModule 后 Angular 路由器停止工作

Question

我正在尝试在 Angular 中创建响应式(Reactive)表单。

这是我的登录表单。

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" name="username" placeholder="username" 
    [formControl]="loginForm.controls['username']" />

  </div>
  <div class="form-group">
    <label for="username">Password</label>
    <input type="text" class="form-control" name="Password" placeholder="Password" 
      [formControl]="loginForm.controls['password']" />
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>

当我看到控制台时，我发现了一个错误。

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

然后我导入了ReactiveFormsModule在我的主模块以及 login.component.ts 中文件。但现在它向我展示了另一个错误。

app.module.ts 的一部分

 imports: [
    BrowserModule,
    NgbModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    CommonModule,
    routing.ngModule
  ]

以及文件login.component.ts的一部分

import { Component, OnInit } from '@angular/core';

import {FormBuilder, FormGroup, FormControl,ReactiveFormsModule} from '@angular/forms'

No provider for ChildrenOutletContexts!

当我点击错误时，它会将我带到我的 app.component.html页面位于<router-outlet></router-outlet>

但是当我删除 ReactiveFormsModule 时从我的主模块中，这个消失了。

控制台中出现错误。

这是我的项目 GIT

Answer 1

您可能需要“导入”路由器的名称。即。

`export const routerConfig: Route[] = [
    { path: '', redirectTo: '/gifts', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'gifts', component: GiftsComponent },
];`

将是:

`RouterModule.forRoot(routerConfig),`

因此，您需要将 routerConfig 或您指定的任何内容添加到导入中。

类似这样的事情:

`@NgModule({
    imports: [
        CommonModule,
        RouterModule.forRoot(routerConfig), // ADD HERE
    ], ...

`