I recently created a brand new Angular 9 application with a submodule. Here are my app.modules.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { HomeComponent } from './home/home.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared.module';
import { CommonModule } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
CommonModule,
BrowserModule,
MatSidenavModule,
MatToolbarModule,
MatButtonModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
],
bootstrap: [AppComponent],
})
export class AppModule { }
And login.module.ts:
import { NgModule } from '@angular/core';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
const routes: Routes = [
{
path: '',
component: LoginComponent
}
];
@NgModule({
declarations: [],
imports: [
CommonModule,
BrowserModule,
MatSidenavModule,
MatToolbarModule,
MatButtonModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forChild(routes)
]
})
export class LoginModule { }
This is the HTML code for my login.component.html:
<form novalidate id="login_form" [formGroup]="form" (submit)="submit()">
<div>
<label>
Username:
</label>
<input name="username" formControlName="username" />
</div>
<div>
<label>
Password:
</label>
<input name="password" formControlName="password" />
</div>
<button type="submit">Login</button>
</form>
And here is the TypeScript code in my login.components.ts file:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor() { }
form: FormGroup;
ngOnInit(): void {
this.form = new FormGroup({
username: new FormControl(''),
password: new FormControl('')
});
}
submit() {
console.log(this.form.value);
return false;
}
}
I encountered the following error:
: Compiled successfully.
ERROR in src/app/login/login.component.html:1:34 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
1 <form novalidate id="login_form" [formGroup]="form" (submit)="submit()">
~~~~~~~~~~~~~~~~~~
src/app/login/login.component.ts:6:16
6 templateUrl: './login.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component LoginComponent.
It appears to be an issue related to module inclusion, even though all necessary Forms modules are already declared in both the app and login modules. The problem persists even when using a shared module.