Angular "No directive found with exportAs 'ngModel'" (FomsModule already importe-CodePudding

I'm having this error and all i can find is to import "FomsModule", but is already imported.

i tried adding "ReactiveFormsModule" but it doesn't work either.

full Error:

src/app/components/create/create.component.html:7:51 - error NG8003: No directive found with exportAs 'ngModel'.

<input type="text" name="name" #name="ngModel" [(ngModel)="project.name"]>

  src/app/components/create/create.component.ts:7:16
 templateUrl: './create.component.html',
Error occurs in the template of component CreateComponent.

My component template:

<form #projectForm = "ngForm" (ngSubmit)="onSubmit(projectForm)">
        <p>
            <label for="name">Nombre</label>
            <input type="text" name="name" #name="NgModel" [(ngModel)="project.name"]>
        </p>
</form>

My component:

import { Component, OnInit } from '@angular/core';
import { Project } from '../../models/project';
import { ProjectService } from '../../services/project.service';

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

  constructor(
  ) { 
  }

  ngOnInit(): void {
  }
}

And my app.module:

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


import { AppComponent } from './app.component';
import { CreateComponent } from './components/create/create.component';


@NgModule({
  declarations: [
    AppComponent,
    CreateComponent,
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    routing,
    HttpClientModule,
  ],
  providers: [appRoutingProviders],
  bootstrap: [AppComponent]
})
export class AppModule { }

Any idea of what is cousing the error?

CodePudding user response：

In the template block you have an coding error

Change [(ngModel)="project.name"] to [(ngModel)]="project.name"

<form #projectForm = "ngForm" (ngSubmit)="onSubmit(projectForm)">
        <p>
            <label for="name">Nombre</label>
            <input type="text" name="name" #name="NgModel" [(ngModel)]="project.name">
        </p>
</form>