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

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.6
Node: 12.16.0
OS: darwin x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2
    

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { LoginRoutingModule } from './login-routing.module';
import { LoginComponent } from './login.component';

@NgModule({
  declarations: [LoginComponent],
  imports: [LoginRoutingModule, ReactiveFormsModule]
})
export class LoginModule { }

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  loginForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

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

  onSubmit() {

  }
}

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <input type="email" class="form-control" formControlName="username" required placeholder="username: [e-mail]">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" formControlName="password" required placeholder="password: admin123">
                </div>
                <button type="submit" [disabled]="!loginForm.valid" class="btn btn-primary btn-block">Login</button>
            </form>

[JoostK]

@VinitTomar The import of ReactiveFormsModule should be sufficient

@Vaibhav161994 I presume you edited that example to verify this, however your changes are not present in that link (I guess it’s some sort of template)

Anyhow, I can only reproduce if I don’t include ReactiveFormsModule in the NgModule that declares the component, but then the error is legitimate. @mzl1988 Is there something specific about your setup, or did some information get lost when you shared the pieces of code? Perhaps you can create a Github repo that showcases the issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}