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

4 Answers
4

Please use below HTML

`<form [formGroup]="form">`


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

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

formGroup

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.

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

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>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.