Importing ReactiveFormsModule throw error No provider for ChildrenOutletContexts in Angula

795 views
Skip to first unread message

Amit Kumar

unread,
Jun 19, 2017, 11:00:08 AM6/19/17
to Angular and AngularJS discussion
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.


TdflY.png
xfPJY.png
Reply all
Reply to author
Forward
0 new messages