Property 'name' does not exist on type 'FormGroup'

Question

I am facing the issue in creating form fields in reactive forms in another module.

app/post/create/create.coponent.html

<a href="#" routerLink="/post/index" class="btn btn-primary">Back</a>

<form  [formGroup]="form" (ngSubmit)="submit()">

    <div class="form-group">
        <label for="name">Name:</label>
        <input formControlName="name" id="name" type="text" class="form-control">
        <div *ngIf="form.name.touched && form.name.invalid" class="alert alert-danger">
            <div *ngIf="form.name.errors?.required">Title is required.</div>
        </div>
    </div>


    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
</form>

` app/post/create/create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup,FormControl,Validators,FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { PostService } from '../post.service';

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

  form!:FormGroup;

  constructor(public postService:PostService,private router:Router,private formBuilder:FormBuilder) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      name: new FormControl('',[Validators.required]),
      age: new FormControl('',[Validators.required]),
      department: new FormControl('',[Validators.required]),
      blood_group: new FormControl('',[Validators.required]),
      address: new FormControl('',[Validators.required]),
      contact: new FormControl('',[Validators.required]),
      id: new FormControl('',[Validators.required])
    })
  }

  get f(){
    return this.form.controls;
  }

  submit(){
    this.postService.create(this.form.value).subscribe(res=>{
      console.log('Post created successfully');
      this.router.navigateByUrl('post/index');
    })
  }

}

post/post.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PostRoutingModule } from './post-routing.module';
import { IndexComponent } from './index/index.component';
import { ViewComponent } from './view/view.component';
import { CreateComponent } from './create/create.component';
import { EditComponent } from './edit/edit.component';
import { PostService } from './post.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    IndexComponent,
    ViewComponent,
    CreateComponent,
    EditComponent
  ],
  imports: [
    CommonModule,
    PostRoutingModule,
    ReactiveFormsModule,
    FormsModule
  ],
  exports:[
    IndexComponent,
    ViewComponent,
    CreateComponent,
    EditComponent
  ],
  providers:[PostService]
})
export class PostModule { }

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostModule } from './post/post.module';

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

I have added the ReactiveFormsModule in imports array everywhere, still the property that I have mentioned in the formBuilder is not reflected in the html component and is throwing an error.