Angular 9 - Can't bind to 'formGroup' since it isn't a known property of 'form' even though FormsModule and FormBuilder are being imported

Question

rant

I'll preface this by saying my first post was rudely closed by someone karma farming, flagging my post to be closed when the provided solution didn't work. And the linked "duplicate" post showed the same solution that I demonstrated and tried in my original post, so I would appreciate fellow SO browsers to not be so dismissive, and to read my post in its entirety before blindly deciding to shut it down after demoing a solution that didn't solve my initial question.

end rant

I'm trying to make a login form in Angular 9. I understand a common issue in Angular with forms stems from not importing FormsModule in @NgModule

However, I have imported FormsModule AND ReactiveFormsModule, and that hasn't resolved my issue

//from app.module.ts
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        ForumComponent,
        PostComponent,
        UserComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MaterialModule,
        FormsModule,
        FormBuilder,
        ReactiveFormsModule
    ],
    providers: [],
    bootstrap: [AppComponent],
})

And the following is the HTML for my form in my login.component.html file, which as I will demonstrate, I slightly refactored later on.

<form class="box" action="" #loginForm="ngForm" (ngSubmit)="login()">
    <div class="field">
        <label for="" class="label">Email</label>
        <div class="control has-icons-left">
            <input type="email" 
                    placeholder="e.g. bobsmith@rpi.edu" 
                    class="input" 
                    [(ngModel)] = "model.email"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="label">Password</label>
        <div class="control has-icons-left">
            <input type="password" 
                    placeholder="*******" 
                    class="input"
                    [(ngModel)] = "model.password"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="checkbox">
            <input type="checkbox" />
            Remember me
        </label>
    </div>
    <div class="field">
        <button class="button is-success" [disabled]="!loginForm.valid">
            Login
        </button>
    </div>
</form>

The original reply/answer to my first post suggested I add formControlName to the <input> tags, but was then hastily edited to say [(ngModel)] was deprecated. Before I could interject and demonstrate that it still didn't work, my post was closed.

So since anon believes he knows his solution worked, allow me to share with you my current HTML form setup. I followed the docs for FormBuilder, and this is what it led to.

<!-- LATEST HTML -->
<form class="box" action="" [formGroup]="loginForm" (ngSubmit)="login()">
    <div class="field">
        <label for="" class="label">Email</label>
        <div class="control has-icons-left">
            <input type="email" 
                    placeholder="e.g. bobsmith@rpi.edu" 
                    class="input" 
                    formControlName = "email"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="label">Password</label>
        <div class="control has-icons-left">
            <input type="password" 
                    placeholder="*******" 
                    class="input"
                    formControlName = "password"
                    required />
            <span class="icon is-small is-left">
                <i class="fa fa-lock"></i>
            </span>
        </div>
    </div>
    <div class="field">
        <label for="" class="checkbox">
            <input type="checkbox" />
            Remember me
        </label>
    </div>
    <div class="field">
        <button class="button is-success" [disabled]="!loginForm.valid">
            Login
        </button>
    </div>
</form>

And in my login.component.ts file, this is what I have

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { AuthService } from 'src/app/auth.service';
import { FormBuilder } from '@angular/forms';

@Component({
    selector: "app-login",
    templateUrl: "./login.component.html",
    styleUrls: ["./login.component.css"],
})
export class LoginComponent implements OnInit {
    model: any = {};
    loginForm;

    constructor(
        private authService: AuthService,
        private router: Router,
        private formBuilder: FormBuilder
    ) {
        this.loginForm = this.formBuilder.group({
            email: '',
            password: ''
        });
    }

    ngOnInit(): void { }

    login() { 
        this.authService.login(this.model).subscribe(
            next => {
                this.router.navigate(['/home']);
            },
            error => {
                throw new Error("ERROR: Login failed");
            }
        );
    }
}

Ok cool, refactored exactly to the specs as per the official Angular Docs on FormBuilder . Well, this is the error that gets dumped into my console when I try to serve the Angular app.

ERROR in src/app/components/login/login.component.html:6:34 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

    line 6  <form class="box" action="" [formGroup]="loginForm" (ngSubmit)="login()">
                                                            ~~~~~~~~~~~~~~~~~~~~~~~

src/app/components/login/login.component.ts:8:15
    line 8  templateUrl: "./login.component.html",
                        ~~~~~~~~~~~~~~~~~~~~~~~~

Error occurs in the template of component LoginComponent.

As demonstrated, twice now, the form does not compile - Even when following the docs exactly. I would appreciate any help I can get, as this issue has been driving me up a wall for hours. Thanks

Answer 1

As I can see here you have not added your LoginComponent to declarations array in app.module.ts. It means you have another module in your app which declares LoginComponent. So you have to import FormsModules and Reactive forms module inside that module file.

Sorry, This should be a comment but I am not privileged to add comments.

Answer 2

I can see you didn't add login component to app.module.ts Please go to module for login.component.ts and add FormsModule and ReactiveFormsModule Then it will work I am sure