CODEWITHSUNDEEP
angularangular-ngmodel
Imanol Espejo
Imanol Espejo

Reputation: 1

ngModel gives error even after importing FormModule

This is the HTML code

<form (submit)="agregarCliente()">
    <div>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" [(ngModel)]="nuevoCliente.nombre" required>
    </div>
    <div>
      <label for="apellidos">Apellidos:</label>
      <input type="text" id="apellidos" name="apellidos" [(ngModel)]="nuevoCliente.apellidos" required>
    </div>
    <div>
      <label for="calle">Calle:</label>
      <input type="text" id="calle" name="calle" [(ngModel)]="nuevoCliente.calle" required>
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" [(ngModel)]="nuevoCliente.email" required>
    </div>
    <div>
      <label for="numTelefono">Número de Teléfono:</label>
      <input type="text" id="numTelefono" name="numTelefono" [(ngModel)]="nuevoCliente.numTelefono" required>
    </div>
    <button type="submit">Agregar Cliente</button>
  </form>

And this is the app.module.ts

import { NgModule } from '@angular/core';
import { CalendarModule } from 'primeng/calendar';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';



@NgModule({
    declarations: [AppComponent],
    imports: [NgModule, CalendarModule, CommonModule, HttpClientModule, FormsModule],
    providers: [],
    bootstrap: [AppComponent]
    
})
export class AppModule {

}

I've tried importing Forms module in multiple ways, I've checked multiple forums and they all say to ensure the import but it is clear that is correct I do not know what else to do

Upvotes: 0

Views: 130

Answers (1)

Agota Kristof
Agota Kristof

Reputation: 560

Do you use the formModule in the main module? that is, do you want to create a form in the main module or in another internal module. Because if you want to use the formModule inside an internal module, then you have to include the formModule in the internal module . If the explanation is not clear enough, write to me and I will try to explain more. I can show my own example, maybe it will help...

in the app.module:

import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,        
VolunteersManagementModule, GeneralModule, 
PlacementVolunteersModule, HttpClientModule],
    providers: [VolunteerService],
    bootstrap: [AppComponent]
})
export class AppModule {
}

in my inner module PlacementVolunteersModule:

@NgModule({
  declarations: [
    SchedulingComponent
  ],
  imports: [
    CommonModule,FormsModule,ReactiveFormsModule,BrowserModule],
  providers: [ScheduleService],
  exports:[SchedulingComponent]
})
export class PlacementVolunteersModule { }

Upvotes: 1

Related Questions