how to use angular/forms in angular 5? - forms

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