I'm trying to create reactive form in Angular.
This is my login form.
<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>
When I see the console, Then I found a error.
Can't bind to 'formGroup' since it isn't a known property of 'form'.
Then I imported ReactiveFormsModule
in my main module and also in login.component.ts
file. But now It's showing me another error.
Part of app.module.ts
imports: [
BrowserModule,
NgbModule.forRoot(),
FormsModule,
ReactiveFormsModule,
CommonModule,
routing.ngModule
]
And Part of file login.component.ts
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, FormControl,ReactiveFormsModule} from '@angular/forms'
No provider for ChildrenOutletContexts!
Please my complete code on GIT
I have attached screenshot of my error generated in browser console.