Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't bind to FormGroup since it isn't a known property of 'form' (FormsModule, ReactiveFormsModule loaded)

I've just seen this question but I still have the same error. I have a shared module which I import to my feature module. But I also tried import FormsModule, ReactiveFormsModule modules to my feature module directly.

Angular 2.0 Final version.

My shared module is:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';


import { UploadComponent } from './upload/index';

import { AuthenticationService } from './services/index';

@NgModule({
  declarations: [ UploadComponent, UPLOAD_DIRECTIVES ],
  imports: [ CommonModule ],
  providers: [ AuthenticationService ],
  exports: [
    FormsModule,
    CommonModule,
    UploadComponent,
    ReactiveFormsModule
  ]
})

export class SharedModule { }

My feature module:

import { NgModule } from '@angular/core';

import { SharedModule } from '../shared/shared.module';

import { LoginComponent } from './login.component';

@NgModule({
  imports: [ SharedModule ],
  declarations: [ LoginComponent ],
  exports: [ LoginComponent ]
})

export class LoginModule {
  constructor() {}
}

The component:

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

@Component({
  selector: 'pol-login',
  templateUrl: 'login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;
  notValidCredentials: boolean = false;
  showUsernameHint: boolean = false;

  constructor(
    fb: FormBuilder,
    private authenticationService: AuthenticationService) {

      this.loginForm = fb.group({
        username: ['', Validators.compose([Validators.required, this.emailValidator])],
        password: ['', Validators.required]
      });
...
}

And the view:

<form class="container" (ngSubmit)="authenticate()" [ERROR ->][FormGroup]="loginForm">
....
</form>

All paths and imports are correct. Any ideas? Thanks.

------ [SOLVED] -------

Changed [FormGroup]="loginForm" for [formGroup]="loginForm" :(

like image 873
Javier RB Avatar asked Sep 23 '16 09:09

Javier RB


People also ask

Can't bind to FormGroup since it is a known property of form?

What Does This Error Mean? Angular is trying to tell us that it doesn't know about the formGroup directive on the <form> element in your component. This usually happens when the wrong forms module is imported, the right module is imported in the wrong place or the ReactiveFormsModule is just not imported at all.

Can't bind to FormGroup since it isn't a known property of form lazy loading?

In order to solve can't bind to 'formgroup' since it isn't a known property of 'form' error you need to import ReactiveFormsModule in each submodule file.

What is the difference between FormsModule and ReactiveFormsModule?

Here are the differences between Template-Driven and Reactive Forms: Template Driven Forms need the FormsModule, while Reactive forms need the ReactiveFormsModule. Template Driven Forms are based only on template directives, while Reactive forms are defined programmatically at the level of the component class.

What is ReactiveFormsModule in Angular?

A directive which installs the MinValidator for any formControlName , formControl , or control with ngModel that also has a min attribute. NgControlStatus. Directive automatically applied to Angular form controls that sets CSS classes based on control status. NgControlStatusGroup.


Video Answer


1 Answers

Solution:

import { ReactiveFormsModule } from '@angular/forms'

Import this module to app.module.ts or Your Component Class. ( Recommended to import in app.module.ts ).

Then Direct it...ex:---

imports: [
   ReactiveFormsModule
]
like image 67
Deepak swain Avatar answered Sep 18 '22 16:09

Deepak swain