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();
}