Can't bind to 'formGroup' since it isn't a known property of 'form' in angular 7

Question

I'm making login using web api with angular 7 but when I'm using <form [formGroup]="loginForm" (submit)="loginFormSubmit()"> then i got error, What is wrong in this code.

login.component.html

<form [formGroup]="loginForm" (submit)="loginFormSubmit()">              
                <h2 class="text-center red heading text-heading">LOGIN</h2>
                <div class="form-group custom-input">
                    <div>
                        <span style="color: #D56161;" class="lblMessage"></span>
                    </div><br>
                    <div class="input-group">
                        <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>
                        <input class="form-control" data-val="true" data-val-required="required" formControlName="userId" placeholder="Username" type="text" value="">
                    <small class="text-danger" *ngIf="loginForm.form-control.userId.invalid && (loginFormSubmitted  || loginForm.controls.userId.touched)">Required</small>
                    </div>
                    <div style="text-align:left">
                        <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true" style="color:#D56161;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>
                        <input class="form-control" data-val="true" data-val-required="required" id="Password" formControlName="Password" placeholder="Password" type="password">
                        <small class="text-danger" *ngIf="loginForm.controls.password.invalid && (loginFormSubmitted || loginForm.controls.password.invalid)">Required</small>
                    </div>
                    <div style="text-align:left">
                        <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true" style="color:#D56161;"></span>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-block btn-primary button login" [disabled]="loginFormSubmitted">LOGIN <i class="fa fa-arrow-right"></i></button>
                </div>
                <hr>
                <div class="row">
                    <div class="col-lg-12">
                        <a class="float-left" href="/Admin/ForgotPassword">Forgot Password?</a>
                        <a class="float-right" href="">Back to Website</a>
                    </div>
                </div>
            </form>

login.component.ts

import { Component } from '@angular/core';
import { ApiService } from '../../../../services/api/api.service';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
})

export class loginComponent{

    users$: object;

    constructor(private data: ApiService){
    }

    ngOnInit(){

    }

    loginFormSubmit(){
        alert('login alert');
    }

}

How can I solve it?

Thanks!

You have forgotten to import ReactiveFormsModule in your NgModule. — JB Nizet, Oct 27 '18 at 08:26
Possible duplicate of [Can't bind to 'formGroup' since it isn't a known property of 'form'](https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) — JB Nizet, Oct 27 '18 at 08:27
Please improve your question, I think this will help lot of other people who are new to angular. Also checkout my improved answer. — Tibin Thomas, Oct 28 '18 at 07:45

Sathiraumesh · Answer 1 · 2018-10-27T08:59:40.110

You have to define a formGroup in the the login.ts file

First import the Forms Module and the Reactive forms module to the module where the login component is declared.It should look some thing like this

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';





 @NgModule({
  declarations: [
    loginComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,

  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Next go to the login.ts and build a form group it should look like this you can either form builder or other methods to do this.Fore more follow the the link below.Here i have used the form builder below angular reactive forms

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

import { Validators } from '@angular/forms';

@Component({
  // your meta data
})
export class loginComponent implements OnInit {

  constructor(fb:FormBuilder) { }

  ngOnInit() {
  }

  private loginForm = this.fb.group({
    userId: ['',],
    // enter the other form controls in the group

  });



}

Tibin Thomas · Answer 2 · 2018-10-28T07:43:01.187

In pure HTML formGroup is not defined, that is the reason debugger is throwing error. You can bring it to your project by importing ReactiveFormsModule from @angular/forms package. [formGroup] directive is declared and exported from ReactiveFormsModule.

Because it is exported from ReactiveFormsModule you will be able to use that directive in any component which is declared in a Module that imports the ReactiveFormsModule.

In the formGroup directive there is an @Input property called formGroup, so what you are exactly trying to do is, property binding the instance of your formGroup in the ts file that you created to the @Input property available inside the formsGroup directive.

Note : formGroup directive from ReactiveFormsModule is a child for your component. To communicate to child you have to use property binding in Angular. Thats what you are doing.

The same pattern of property binding and event binding is used throughout the Angular framework, understanding this will help to work easily with Angular 2+.

Can't bind to 'formGroup' since it isn't a known property of 'form' in angular 7

2 Answers2