Error : Can’t bind to 'formGroup' Since it isn’t a known Property of 'form'

Question

I am creating an app in IONIC V 4

In the form using Formbuilder added the tag [formGroup] appeared two errors :

  <form [formGroup]="formRegister">

and the other :

The componet [Register.page.ts] looks like this :

    import { User } from './../../../models/user';
    import { Component, OnInit, Input } from '@angular/core';
    import { ModalController, NavController } from '@ionic/angular';
    import { LoginPage } from '../login/login.page';
    import { AuthService } from 'src/app/services/auth.service';
    import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
    import { AlertService } from 'src/app/services/alert.service';

    @Component({
      selector: 'app-register',
      templateUrl: './register.page.html',
      styleUrls: ['./register.page.scss'],
    })
    export class RegisterPage implements OnInit {
      formRegister: FormGroup;

      constructor(
        private modalController: ModalController,
        private authService: AuthService,
        private navCtrl: NavController,
        private alertService: AlertService,
        private formBuilder: FormBuilder
      ) {  }

      ngOnInit(): void {
       this.formRegister = this.formBuilder.group({
          username: ['', [Validators.required, Validators.minLength(4)]],
          email: ['', [Validators.required, Validators.email]],
          password: ['', [Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z]).{6,}')]]
        });
      }

      register() {
        this.authService.register(this.formRegister.value)
        .subscribe(data => {
            this.authService.login(this.formRegister.value)
            .subscribe((res) => { console.log(res); },
              error => {
                console.log(error);
              },
              () => {
                this.dismissRegister();
                this.navCtrl.navigateRoot('/dashboard');
              }
            );
            // tslint:disable-next-line:no-string-literal
            this.alertService.presentToast(data['message']);
          },
          error => {
            console.log(error);
          },
          () => { console.log('ok'); }
        );
      }

      }

The module [Register.module.ts] looks like this :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { RegisterPage } from './register.page';
import { Routes, RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '',
    component: RegisterPage
  }
];

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],
  declarations: [RegisterPage]
})
export class RegisterPageModule {}

The app.module.ts looks like this:

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { HttpClientModule } from '@angular/common/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [ ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [ReactiveFormsModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    NativeStorage
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

What am I doing wrong?

Thanks in advance.

Answer 1

I was inserting the imports: import { ReactiveFormsModule, FormsModule } from '@angular/forms'; only in the module Registerpagemodule however (in my case) there is another module that calls the one that displayed the form in the modal, when entering the imports corrected the error.