1

tengo el siguiente error con este modulo, soy nuevo con angular y estoy aprendiendo, realice otro proyecto con un routing pero todo lo configure dentro de app.module.ts que no es una buena practica, pero al actualizarme con ANGULAR10, me permite crear el contenedor app-routing.component.ts de fabrica y estoy haciendo la pagina con buenas practicas pero me tope con este problema.

El error:

src/app/components/contact/contact.component.html:7:87 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

7     <input type="text" name="nombre "placeholder="Ejemplo: Andres " #nombre="ngModel" [(ngModel)]="usuario.nombre" required>
                                                                                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/components/contact/contact.component.ts:8:16
    8   templateUrl: './contact.component.html',

app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule} from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

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

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule} from '@angular/common/http'
import { ComponentsAboutComponent } from './components/about/components-about.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { CreateComponent } from './components/create/create.component';
import { ContactComponent } from './components/contact/contact.component';




const appRoutes : Routes=[
  {path:'', component: ComponentsAboutComponent},
  {path:'sobremi', component: ComponentsAboutComponent},
  {path:'proyectos', component: ProjectsComponent},
  {path:'crear-proyectos', component: CreateComponent},
  {path:'contactos', component: ContactComponent},
  {path:'**', component: ComponentsAboutComponent},
];

@NgModule({
  imports: [BrowserModule,HttpClientModule,RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Se que debo utilizar el FormsModule en alguno de los componentes, pero no estoy muy claro si es en el app.component.ts o app-routing.component.ts

2 respuestas 2

1

Debes declarar ContactComponent en AppModule. Así Angular sabe que ese componente ocupará directivas de FormsModule:

declarations: [ AppComponent, ContactComponent ]

0

En el archivo app-routinf.module.ts estás definiendo las rutas y le asocias el componente que se debe mostrar.. hasta ahí todo bien.

Ahora, en el app.module.ts en el apartado de declarations debes importar todos los componentes que declaraste en las rutas.

Ahora, para solucionar su error, debe importar ReactiveFormsModule en el apartado de imports del archivo app.module.ts ; la razón de esto, es que angular no reconoce el atributo ngModel, sólo después de importar el módulo FormsReactiveModule

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.