how to use angular/forms in angular 5?

Question

I'm using angular 5 and now I need a form for user's sign-in. but when I run my project I got the error Can't bind to 'formGroup' since it isn't a known property of 'form' ! here are some of my codes:

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,

    }
  }
}

and this is my 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>

i did it in angular 4 and it worked well but now i get the errors bellow! Can't bind to 'formControl' since it isn't a known property of 'input & Can't bind to 'formGroup' since it isn't a known property of 'form'!!! what's wrong with the codes?

Answer 1

Try importing 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 { }