1

Se que hay muchas preguntas de este tema. He navegado bastante y al momento no encontrado algo que lo solucione.

El problema es que pese a que FormsModule ha sido importado sigue marcando el mismo error.

AppModule.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
....

Luego en html del template algo como esto:

<div class="ibox login-content">
<div class="text-center">
    <span class="auth-head-icon"><i class="la la-user"></i></span>
</div>
<form class="ibox-body" id="login-form" action="javascript:;" method="POST">
    <h4 class="font-strong text-center mb-5">LOG IN</h4>
    <div class="form-group mb-4">
        <input type="text" class="form-control-line" name="username" [(ngModel)]="model.username" required placeholder="Email"/>

    </div>
</form>

loginComponent.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../_services/index';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    **model: any = {};**
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {
        // reset login status
        this.authenticationService.logout();

        // get return url from route parameters or default to '/'
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

Alguna sugerencia?

4
  • Puedes mostrar el archivo Ts para ver como tienes declarado model
    – lDanny7
    Commented el 27 jun. 2018 a las 21:10
  • listo @IDanny7 he agredado el componenet Commented el 27 jun. 2018 a las 22:43
  • ¿Qué versión de Angular estás utilizando??
    – Sema
    Commented el 1 jul. 2018 a las 17:02
  • Actualizaste angular? Intenta elimando node_modules, seguido de npm install Si actualizaste a angular 10 desde angular < 9 tienes que actualizar las librerias a angular 10.
    – Legna
    Commented el 4 sept. 2020 a las 21:01

1 respuesta 1

3

Me pasó lo mismo.

ACTUALIZACIÓN:

El problema que tenía era que debía importar FormsModule en el archivo .module.ts más cercano al componente con el error.

Estructura de carpetas de proyecto Angular

El <input> y el error estaban en app/shared/outlined-field/outlined-field.component.html, y yo tenía correctamente importado FormsModule en app/app.module.ts.

Mi solución fue importar (también?) FormsModule en app/shared/shared.module.ts que era el archivo .module.ts más cercano a mi componente.

ORIGINAL:

(Esta respuesta está erronea, el uso correcto es [(ngModel)] como dice Legna, si bien el error desaparece, el problema no y el ngModel sigue sin funcionar.)

El problema era que estaba usando [(ngModel)] en vez de ([ngModel]).

2
  • 1
    El uso correcto es [(ngModel)]
    – Legna
    Commented el 4 sept. 2020 a las 20:59
  • 1
    Tienes razón, mi error. Sin embargo, si revisas la edición de mi respuesta, finalmente encontré la solución a mi problema Commented el 8 sept. 2020 a las 23:36

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.