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

user12566462

I try to make a simple Login with Ionic (with angular framework) but I got this error I don't know how to solve it

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

I search and all the peoples when they add ReactiveFormsModule the error gone but when I add it the error still exist

here the HTML

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">

<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="black-circle"></div>
    <ion-title class="ion-text-center custom-font">Se Connecter</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <svg class="back-bolb" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <path fill="#CCCCCC" d="M65,-20C70,-5.6,50.1,18,26.8,34.3C3.5,50.7,-23.3,59.7,-41.2,48.6C-59.1,37.5,-68.2,6.2,-59.9,-12.8C-51.5,-31.7,-25.8,-38.3,2.1,-39C30,-39.7,59.9,-34.4,65,-20Z" transform="translate(100 100)" />
  </svg>

  <div class="ion-padding">

    <form class="ion-no-padding" [formGroup]="todo" (ngSubmit)="logForm()">
       <div class="wrap-input">
         <input class="input" type="text"  placeholder="Numero de matricule">
       </div>
       <div class="wrap-input">
        <input class="input" type="password"  placeholder="Le Mot de passe">
       </div>
       <div class ="container-form-btn">
        <button class="form-btn custom-font">
          Soumettre
        </button>
       </div>
    </form>

  </div>
</ion-content>

the app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { CommonModule } from '@angular/common';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,FormsModule,ReactiveFormsModule, IonicModule.forRoot(), AppRoutingModule],

providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
  exports: [FormsModule,ReactiveFormsModule,CommonModule]
})
export class AppModule {}

the controller.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
   todo : FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.todo = this.formBuilder.group({
      employeeN: ['', Validators.required],
      password: [''],
    });
  }

  logForm(){
    console.log(this.todo.value)
  }

}

did I miss some thing ? please help me I'm stack on this error

E. Maggini

If home page has its own module you need to do the import there, otherwise you need to add HomePage Component to the declarations of app module.

This is in fact a duplicate question with Angular 9 - Can't bind to 'formGroup' since it isn't a known property of 'form'

Collected from the Internet

Please contact [email protected] to delete if infringement.