0

I just se tup a project, and it is compiling succesfully, but every time I try to add a directive, it shows this error, for example for [formGroup]: "Property formGroup is not provided by any applicable directives nor by form element". But if I try ngModel or *ngIf, none of them are working.

I tried reinstalling everything, deleted node_modules, reinstalled it, created a new project, tried it there. Pulled a project from github and configured it, it compiles, but still not recognizes any of the modules. I have imported every necessary module to the app.module.ts and still not working. I followed step by step everything on tutorials, tried at least 3 tutorial videos and 7 articles, but no success at all.

This is my app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule} from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from "@angular/material/button";
import {MatDividerModule} from "@angular/material/divider";
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from "@angular/fire/compat";
import { OverviewComponent } from './overview/overview.component';

@NgModule({
  declarations: [AppComponent, LoginComponent, OverviewComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatDividerModule,
    FormsModule,
    ReactiveFormsModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

this my login template:

<h4 class="text-center m-3">Login</h4>
<div class="form-container">
  <form [formGroup]="loginForm">
      <input required />
      <input required type="password" />
    <button>Login</button>
  </form>
</div>
<h4 class="text-center m-3">Register</h4>
<div class="form-container">
    <input required />
    <input required type="password" />
    <input required type="password" />
  <button>Register</button>
</div>

this is my login ts file:

import {Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, FormControl } 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({
      email: new FormControl(''),
      password: new FormControl('')
    })
  }

}

The error is in the template as it says to the [formGroup]: Property formGroup is not provided by any applicable directives nor by form element

Gergő Szabó
  • 57
  • 1
  • 5
  • We cannot help you without having a look to what you did wrong. Please make a minimal reproductible app on stackblitz so we can have a look to your code. – Random Jun 22 '23 at 14:57
  • Have you imported FormsModule inside AppModule? – Evgeny Gurevich Jun 22 '23 at 14:59
  • Remember you should import the module where your directive belong in the module where your component is declared. e.g. formGroup is a directive that belong to the module ReactiveFormsModule from package `@angular/forms`, So you should import the ReactiveFormsModule in the module where you have in "declarations" your AppComponent.. see the docs [here](https://angular.io/guide/ngmodules) and [here](https://angular.io/guide/architecture-modules) – Eliseo Jun 22 '23 at 15:02
  • Yes, it is imported. – Gergő Szabó Jun 22 '23 at 15:10
  • @GergőSzabó, Use a *ngIf to avoid initial errors: `
    ...
    `. You create the loginForm in ngOnInit, so at very first loginForm is undefined     – Eliseo Jun 22 '23 at 15:22
  • I can't use *ngIf either – Gergő Szabó Jun 22 '23 at 15:35
  • @GergőSzabó, I see your code is correct (except the part of the form is `this.loginForm = this.fb.group({email: '',password: ''})` but it's not related your question). The only I imagine can makes your app crash is that the versions of firebase and Angular are not compatibles :( – Eliseo Jun 22 '23 at 15:53

1 Answers1

0

As per documentation CommonModule required to use built in directives.

Do import like this: import { CommonModule } from '@angular/common';

And in AppModule in imports array put CommonModule in the first place.

Yaroslav
  • 358
  • 3
  • 14