我正在尝试在 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
最佳答案
您可能需要“导入”路由器的名称。即。
`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
], ...
`
关于javascript - 导入 ReactiveFormsModule 后 Angular 路由器停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44627936/