Angular 6组件无法绑定FormGroup问题求助

嘿，这个问题我之前踩过坑！你碰到的can't bind form group错误，本质是没有在对应模块中导入响应式表单的核心模块，Angular不会自动帮你加载这个模块，得手动配置~

核心解决步骤：导入ReactiveFormsModule #

Angular的响应式表单指令（比如formGroup、formControlName这些）都封装在ReactiveFormsModule里，你需要在组件所属的模块中导入它：

1. 找到你的组件所属的模块（比如AppModule，或者如果是特性模块的话比如ContactsModule）
2. 添加如下导入并在@NgModule的imports数组中声明：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入响应式表单模块
import { ReactiveFormsModule } from '@angular/forms';

import { NewcontactComponent } from './newcontact/newcontact.component';

@NgModule({
  declarations: [
    NewcontactComponent
    // 其他组件
  ],
  imports: [
    BrowserModule,
    // 加入这个模块！
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

额外注意点 #

• 如果你的NewcontactComponent属于一个懒加载的特性模块，记得要在该特性模块的imports数组里也加入ReactiveFormsModule，不能只依赖根模块的导入。
• 你的组件代码和模板里的表单初始化逻辑是没问题的：ngOnInit里调用initForm创建FormGroup，模板里[formGroup]="userForm"的绑定语法也正确，这部分不用改。
• 顺便提一句：Angular 6对应的RxJS版本已经采用了新的导入方式，你代码里的import 'rxjs/add/observable/interval';可以改成import { interval } from 'rxjs';，不过这不是当前报错的原因，只是一个小优化~

内容的提问来源于stack exchange，提问作者wtimi