Recieving error when creating form in Ionic and Angular

I'm trying to build a "simple" form in Ionic 6.10.1 with Angular 9.1.10.

But I keep getting the following error:

ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]

I've confirmed that I am importing in FormsModule and ReactiveFormsModule, I'm defining the formGroup in the template, and importing the dependencies into the component. Basically, covering all of the issues that I could find via Google. I've also restarted the server several times with no luck.

With commenting out code I've narrowed it down to the template file, but can't figure out the issue.

I hope a fresh set of eyes can help....

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 { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

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

home.page.ts

import { Component,OnInit  } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit{

  type:Array<object> =[ 
    {name: 'mulch',
    weightPerYard: 700},
    {name: 'mravel',
    weightPerYard: 2600},
    {name: 'sand',
    weightPerYard: 2700},
    {name: 'topsoil',
    weightPerYard: 2000},
  ];

  calc: FormGroup;

  totalYards:Number = 0;

  totalTons:Number = 0;


  constructor(private form:FormBuilder) {  

  }

  ngOnInit() {
    this.calc = this.form.group({
      type: ['', [Validators.required]],
      width: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
      length: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
      depth: ['', [Validators.required, Validators.pattern('^[0-9]+$')]]
    })
  }

  calculateWeight(){
    console.log("TEST");
    
    
  }

}

form HTML code

<form [formGroup]="calc" (ngSubmit)="calculateWeight()" id="calc-form">
  <ion-item>
    <ion-label>Type of Material: </ion-label>
    <ion-select oktext="Ok"   formControlName="type" name="type" dismissText="Dismiss"  >
      <ion-select-option value="mulch">Mulch</ion-select-option>
      <ion-select-option value="gravel">Gravel</ion-select-option>
      <ion-select-option value="sand">Sand</ion-select-option>
      <ion-select-option value="topsoil">Top Soil</ion-select-option>
    </ion-select> 

  </ion-item>

  <ion-item>
    <ion-label>Width (sq feet): </ion-label>
    <ion-input type="number"  clearInput formControlName="width" name="width" ></ion-input>
  </ion-item>

    <ion-item>
      <ion-label>Length (sq feet): </ion-label>
      <ion-input type="number"  clearInput formControlName="length" name="length"  ></ion-input>
    </ion-item>

      <ion-item>
        <ion-label>Depth (inches): </ion-label>
        <ion-input type="number"  clearInput  formControlName="depth" name="depth"  ></ion-input>
      </ion-item>

      <ion-button expand="block" strong size="large" >Submit</ion-button>

    </form>