forms - 如何在角度 5 中使用角度/形式？

Question

我正在使用 Angular 5，现在我需要一个用于用户登录的表单。但是当我运行我的项目时，我得到了错误Can't bind to 'formGroup' since it isn't a known property of 'form'！这是我的一些代码：

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule} from '@angular/forms';
import { appRoutes } from './app.routing.module'
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';


@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

user.component.ts：

import { Component, OnInit } from '@angular/core';
import {  FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  private form : FormGroup;
  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this.fb.group({
      username: [null, Validators.compose([Validators.required])],
      password: [null, Validators.compose([Validators.required])]
    })
  }

  show() {
    const user = {
      username: this.form.get('username').value,
      password: this.form.get('password').value,

    }
  }
}

这是我的component.html：

<form [formGroup]="form" (ngSubmit)="show()">
    <div>
      <p>Sign in with your email to continue</p>
    </div>
    <div>
      <div>
        <input placeholder="Username" [formControl]="form.controls['username']">
      </div>
      <div>
          <input type="password" placeholder="Password" [formControl]="form.controls['password']">
      </div>
      <button  color="primary" type="submit">Login</button>
    </div>
  </form>

我在 Angular 4 中做到了，效果很好，但现在我得到了下面的错误！无法绑定到“formControl”，因为它不是“输入”的已知属性，并且无法绑定到“formGroup”，因为它不是“表单”的已知属性！！！代码有什么问题？

Answer 1

尝试导入ReactiveFormsModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { appRoutes } from './app.routing.module'
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';


@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }