I am having a problem setting up reactive angular forms i keep getting errors in my html and ts file. I have tried to import formgroup and form control into my component but it seems they are not there. What further steps do i need to take to get this working. Angular documents have me confused.

Html:

<div class="container">
  <form action="">
    <form formGroup="form" (ngSubmit)="onSubmit()">


      <label for="first-name">First Name: </label>
      <input id="first-name" type="text" formControlName="firstName">


      <label for="last-name">Last Name: </label>
      <input id="last-name" type="text" formControlName="lastName">


      <label for="last-name">Email: </label>
      <input id="last-name" type="email" formControlName="email">


      <button type="submit">Submit</button>
    </form>
  </form>
</div>

Ts:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';


@Component({
  selector: 'app-hoem',
  templateUrl: './hoem.component.html',
  styleUrls: ['./hoem.component.css']
})
export class HoemComponent implements OnInit {


  constructor() { }
  form:any;
  ngOnInit(): void {
    this.form = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      email: new FormControl('')
    })


    onSubmit(){
      console.log(this.form.value)
    }
}

App Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HoemComponent } from './hoem/hoem.component';


@NgModule({
  declarations: [
    AppComponent,
    HoemComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Does anyone know what the problem is here ? any feedback would be much appreciated and I thank you in advance!