Angular error: "No directive was found with exportAs 'ngModel'." Ensure that FomsModule has already been imported

I'm encountering an issue where I am being advised to import "FomsModule", but it is already imported in my code.

I attempted to include "ReactiveFormsModule" as well, but the problem persists.

Here is the complete error message:

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.

This is my component's 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>

Below is my component's code:

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 {
  }
}

Finally, here is 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 insights on what might be causing this error?

Answer №1

You have encountered a coding error in the template block

To rectify this issue, modify [(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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing Nuxt and Vuex to not locate my getters and actions?

I recently started using Nuxt + Vuex and I'm facing an issue where my simple component and store are not recognizing the actions and getters in Vuex. I'm not sure what the problem could be. versions # nuxt: 2.11 # vuex: 3.1.2 # vue: 2.6.11 st ...

`Navigating through database structures using node js`

When it comes to interpreting a Database {} object in JavaScript, I am currently working on back end scripts for validating a registration form. Specifically, I need to make sure that the username and email being used for registration are not already taken ...

React Redux Bundle with Hot Reload Feature

Working on a project written in TypeScript with the React and Redux framework, I'm familiar with webpack and its middleware libraries for hot reloading. My question arises when considering how my TypeScript code is first converted to JSX through gulp ...

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

How can I retrieve the href value of the last anchor tag in the provided content string using pure JavaScript, excluding jQuery? var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba ...

Can Primeng and Angular2 be integrated into JSF without the use of npm?

I'm looking to implement the Angular2 framework for my frontend development, and I've decided to use PrimeNG for the UI components. However, I am not familiar with how npm functions. Here are some tech details: I will be using Eclipse or NetBe ...

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Situation: I want to create a Zingchart graph from a CSV file containing 37 columns. The header in the CSV file will be used as the legend for the graph. Issue: When I define less than 10 elements in the header (including the X-axis name), everything wo ...

Execute identical task using a for loop in JavaScript

Here is a sample code snippet: var seats = [] for (a = 0; a <= seatsNumFront; a++) { seats.push(new Seat((a * xPad) + 300, 60, 30, 30, id++, "A", a, "#998515")) } for (b = 0; b <= seatsNumFront; b++) { seats.push(new Se ...

Utilize Puppeteer for Web Scraping to Extract Products with an Array of Images

I am currently developing my portfolio by working on a variety of small projects, with my current focus on web scraping. Using Puppeteer, I have successfully scraped basic test websites. However, my goal now is to tackle more advanced challenges, such as ...

Tips for creating a loading page that displays while your website loads in the background

Is there a way to display a loading animation or image while my website is loading in the background? I've noticed that it takes about a minute for my website to fully load. I attempted to use <meta http-equiv="refresh" content="1000 ...

How can I display a pre-existing div with a dropdown button?

I have individual div elements for each type of clothing item (shirt, pant, suit) that I want to display when the corresponding service is selected. This means that when I click on one of them, only that specific div will be shown. I am looking for a solut ...

Utilize the active tabpanel MUI component with Next.js router integration

Trying to implement active tab functionality using router pid This is how it's done: function dashboard({ tabId }) { const classes = useStyles(); const [value, setValue] = React.useState(""); useEffect(() => { con ...

Unable to Retrieve JSON Output

PHP Code: $contents = ''; $dataarray = file('/location/'.$_GET['playlist'].''); //Loading file data into array $finallist = ''; //Extract Track Info foreach ($dataarray as $line_num => $line) //Loopin ...

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice. Here is the structure of my pagination element: <ul class="pagination"& ...

Do I really need to install @angular/router as a dependency in Angular CLI even if I don't plan on using it?

After creating a new Angular CLI project, I noticed that certain dependencies in the package.json file seemed unnecessary. I wanted to remove them along with FormModules and HttpModules from imports: @angular/forms": "^4.0.0", @angular/http": "^4.0.0", @a ...

Creating MySQL queries programmatically using data stored in a JSON object

Is it possible to construct a MySQL query dynamically from a JSON object with potentially empty values? For instance, starting with an object like this: { "a": 1 "b": "" "c": "foo" } we want to generate a query like the following (ignoring the emp ...

What could be causing my node server's REST endpoints to not function properly?

Here is a snippet of my index.js file: var http = require('http'); var express = require('express'); var path = require('path'); var bodyParser = require('body-parser') var app = express(); var currentVideo = &apos ...

The sendFile function fails to transmit any data

Currently working on integrating the mailChimp API into my project, but facing an issue with the resFile code that handles sending the success response. The current code snippet: async function run(){ try { const res = await mailch ...

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

Issue arising from swiper version 8 compatibility with angular version 16

After upgrading my Angular application to version 16 and implementing swiper version 8, I encountered errors when running the build:ssr command. The specific error message I received was: ./src/app/modules/pages/enterprise-price-list/enterprise-price-list. ...

Activate the content when selected

Is it possible for you to create a scenario where selecting one item makes other content active or visible, like on the Apple iPhone webpage? For example, when you choose the color of the iPhone 4, the model version becomes fully visible and interactive. ...