Why am I getting 'No directive found with exportAs ngModel' error when using FormsModule and ReactiveFormsModule in Angular?

Question

This is my code and I get "No directive found with exportAs 'ngModel'." error message. I've tried adding FormsModule and ReactiveFormsModule to my app.module.ts (declarations) but still have this issue.

Version: angular 15.2.9

<form>
    <div class="form-group">
        <label for="name">Course name</label>
        <input ngModel name="name" required minlength="3" #name="ngModel" type="text" id="name" class="form-control">
    </div>
    <div class="form-group">
        <label for="category">Course category</label>
        <select name="" id="category" class="form-control">
            <option value=""></option>
            <option *ngFor="let categoryName of categories" [value]="categoryName.id">{{ categoryName.name }}</option>
        </select>
        </div>
        <div class="checkbox">
            <label for="moneyBack">
                <input type="checkbox" id="moneyBack">
                money back he
            </label>
        </div>
        <button class="btn btn-primary">make</button>
</form>

My component.ts file:
import { Component, Input } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  @Input('name') name : any;
categories = [
  { id: 1, name: 'dev'},
  { id: 2, name: 'dev2'},
]
}

Answer 1

It isn't clear what approach you're trying to use with the form. But the issue is with your first input

<input ngModel name="name" required minlength="3" #name="ngModel" type="text" id="name" class="form-control">

Basically you're missusing "ngModel". So I would suggest to change it to this

 <input [(ngModel)]="name" name="name" required minlength="3" type="text" id="name" class="form-control">