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

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>