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

@kdefombelle wrote:

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 AM1802×974 105 KB

Posts: 1

Participants: 1

Read full topic