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

Question

I want to make a form on an ionic page, but I've that error. Image error

I've been searching the problem, and the more popular solution is import ReactiveFormsModule, but as you can see, It's correctly imported. How can the problem be?

The form is located in a page (editpage) that is launched from tab2 page as a modal.

The controller (editpage.page.ts):

import { Component, OnInit, Input } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-editpage',
  templateUrl: './editpage.page.html',
  styleUrls: ['./editpage.page.scss'],
})
export class EditpagePage implements OnInit {
  public todoForm: FormGroup;

  constructor(private formBuilder: FormBuilder,
    navParams: NavParams,
    public modalController: ModalController) {
  }

  ngOnInit() {
    this.todoForm = this.formBuilder.group({
      title: ['', Validators.required],
      description: ['']
    });
  }

public addNote(){

  }
}

The html form:

<form [formGroup]="todoForm" (ngSubmit)="addNote()">
    <ion-item>
      <ion-label>TODO</ion-label>
      <ion-input type="text" formControlName="title"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>DESCRIPCION</ion-label>
      <ion-textarea formControlName="description"></ion-textarea>
    </ion-item>
    <ion-button shape="round" color="primary" fill="solid" type="submit" >Agregar
    </ion-button>
  </form>

Editpage.module.ts

import { Component, Input, NgModule } from '@angular/core';
import { NavParams, IonicModule } from '@ionic/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { EditpagePage } from './editpage.page';
import { CommonModule } from '@angular/common';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [EditpagePage]
})
@Component({
  selector: 'modal-page',
})

export class EditpagePageModule {
  constructor(){}
}

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 { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from 'src/environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    FormsModule,
    ReactiveFormsModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Flashlight,
    Geolocation
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

why is there a component decorator underneath your module declaration? seems problematic to me. and where is your edit page module imported into the main app? is it lazy loaded? — bryan60, Dec 12 '19 at 16:28
I have tried the 2 things you say and I continue with the problem. — juan186, Dec 12 '19 at 16:45
Here is the solution: https://stackoverflow.com/questions/43248849/angular2-cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form — Muhammad Ayyaz, Dec 14 '19 at 08:10

score 0 · Answer 1 · answered Dec 12 '19 at 16:57

Remove the imports from your component:

// REMOVE THIS:
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-editpage',
  templateUrl: './editpage.page.html',
  styleUrls: ['./editpage.page.scss'],
})
export class EditpagePage implements OnInit {
  ...
}

From the Editpage.module.ts remove the @Component decorator

@NgModule({
  ...
})

// REMOVE THIS:
@Component({
  selector: 'modal-page',
})

export class EditpagePageModule {
  constructor(){}

From app.module.ts remove FormsModule, ReactiveFormsModule from the imports
In app.module.ts import EditpagePageModule

Here is a minimal stackblitz: https://stackblitz.com/edit/angular-u2g3wn

There's a lot going on in your samples, once you do these, and if it still doesn't work, I suggest you post a stackblitz example.

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

1 Answers1