CODEWITHSUNDEEP
angularangular6angular4-forms
Abdul Hannan
Abdul Hannan

Reputation: 21

Angular 6: Can't bind to 'FormGroup' since it isn't a known property of 'form'

I am new to Angular 6 and working on ReactiveForms. Getting this error and unable to compile. I have seen the different solutions and Added the ReactiveFormsModule directive in Imports as suggested in solutions still it is showing the same error. Please Help.

Sharing you the desired code and screenshot of the error. app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { AuthorsService } from './authors.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent,
    SignupFormComponent,
    CoursesComponent,
    CourseComponent,
    AuthorsComponent,
    FavoriteComponent,
    TitleCasePipe,
    PanelComponent,
    LikeComponent,
    ZippyComponent,
    ContactFormComponent,
    NewCourseFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],

Signup-form.ts

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });

}

signup-form.html

<form [FormGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
            formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Error Screenshot

Upvotes: 2

Views: 18110

Answers (5)

srashtisj
srashtisj

Reputation: 151

Please use below HTML 

<form [formGroup]="form">
...
</form>

The error is there since you are using capital F in [formGroup].

Upvotes: 3

DTP
DTP

Reputation: 1

include ReactiveFormsModule in your app.module.ts all directives, which are using like formGroup etc.

They are defined in this module.

Upvotes: 0

Hardik Pithva
Hardik Pithva

Reputation: 1745

As mentioned by @srashtisj and @suresh-kumar-ariya, you have to update the convention from FormGroup to formGroup in your HTML form, and everything should be working fine.

FormGroup tracks the same values and status for a collection of form controls.

Learn more about to create form instance at Angular's official Form guide.

Upvotes: 2

Deeksha Bilochi
Deeksha Bilochi

Reputation: 94

You can use FormBuilder as this

import { Validators, FormBuilder, FormGroup, FormControl , ReactiveFormsModule } from '@angular/forms';
constructor(private builder: FormBuilder){}

 public complexForm: FormGroup = this.builder.group({
  'firstname' : '',
  'lastname': '',
});

In Html

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">

 <div class="form-group" >
       <label>First Name:</label>
       <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
  </div>
</form>

Upvotes: 0

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

Issue is related to [FormGroup], use [formGroup]. Created a stackblitz https://stackblitz.com/edit/angular-xbp9fc

Upvotes: 1

Related Questions