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

ionic
#1

I do not know how to use a form in my modal, I get the message core.js:8061 Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.

the module imports FormsModule and ReactiveFormsModule, the forms are working in pages in this module but not in the ion-modal.

Here are the import at module level

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ],

the modal code imports the same FormsModule and ReactiveFormsModule:

import { Component, Input, OnInit } from "@angular/core";
import {
  FormsModule,
  FormControl,
  FormGroup,
  Validators,
  ReactiveFormsModule
} from "@angular/forms";
import { ModalController } from "@ionic/angular";
@Component({
  selector: "modal-page",
  templateUrl: "modal.page.html"
})
export class ModalPage implements OnInit {
  @Input() id: number;

  newGameForm: FormGroup;
  location: FormControl;

  ngOnInit() {
    console.log(`new modal page`);
  }

  constructor(private modalController: ModalController) {
    this.location = new FormControl("Default Location", [
      Validators.required,
      Validators.maxLength(255)
    ]);
    this.newGameForm = new FormGroup({
      location: this.location
    });
  }

  cancel() {
    this.modalController.dismiss({
      dismissed: true
    });
  }

  postGame() {
    if (this.newGameForm.valid) {
      console.log(this.newGameForm.value.location);
    }
  }
}

the modal is displayed via:

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: {
        id: 1
      },
      swipeToClose: true
    });
    return await modal.present();
}

Screenshot 2020-04-06 at 2.15.32 AM
Screenshot 2020-04-06 at 2.15.32 AM1802×974 105 KB

#2

can u share u html code for both modal and from where modal is called?

#3

Here is the html on the parent page tab3.html to trigger the process calling a typescript function presentModal in tab3.page.ts showing the modal modal.page.html:

tab3.html

<ion-button color="danger" (click)="presentModal()">Modal</ion-button>

tab3.page.ts

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: {
        id: 1
      },
      swipeToClose: true
    });
    return await modal.present();
  }

modal.page.html

<ion-header>

  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title><b>New Modal</b></ion-title>
  </ion-toolbar>

</ion-header>

<ion-content class="ion-padding">

  <form [formGroup]="newGameForm">
    <ion-grid>

      <ion-row>
            <ion-col size="4"><ion-label>Location</ion-label></ion-col>
            <ion-col>
                <ion-input formControlName="location" placeholder="Location"></ion-input>
            </ion-col>
      </ion-row>

      <div style="text-align: center;">
        <ion-button size="small"
          (click)="postGame()" type="submit" class="btn btn-primary">GO</ion-button>
      </div>

    </ion-grid>
  </form>

</ion-content>
#4

i think their is some module mismatch as it cant bind to the module where it should import formgroup.

is this a modal page module or the parent module?

#5

It is a tab module, and indeed the ModalPage was not declared.
Issue closed.

Thanks a million for the insight.

1 Like