Can not bind to 'ngModel' since it is not a known property of 'input'

1

I know there are many questions on this topic. I have navigated a lot and at the moment I did not find something to solve it.

The problem is that even though FormsModule has been imported, it still marks the same error.

AppModule.ts

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

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

Then in the template html something like this:

<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;
                });
    }
}

Any suggestions?

    
asked by Cesar Perez Ramirez 27.06.2018 в 23:09
source

1 answer

0

please use ([ngModel] instead of [(ngModel)]

    
answered by 11.07.2018 в 22:43