Angular 10 project, [error TS2322: Type 'Event' is not assignable to type 'string']

Question

I am trying to design a Login form. Two properties in model I taken, used two way binding in userName & password input field in html file and trying to match the input given by user to authenticate based on few hardcoded username/password I have written in component file. But not sure why I am getting error:

Failed to compile.

src/app/login/login.component.html:10:102 - error TS2322: Type 'Event' is not assignable to type 'string'.

10                                 <input type="text" class="form-control" name="username" [(ngModel)]="login.userName" #username="ngModel" required>
                                                                                                        ~~~~~~~~~~~~~~~~~~~~~

  src/app/login/login.component.ts:7:16
    7   templateUrl: './login.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component LoginComponent.

CAN SOMEBODY PLEASE HELP!

login.component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {Login} from './login.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ["./login.component.css","../app.component.css"]
})
export class LoginComponent implements OnInit {

  login=new Login();
  
  constructor(private _router: Router) { }

  users: any[]=[
    {
      userName: "admin",
      password: "admin"
    },
    {
      userName: "user1",
      password: "user1@123"
    },
    {
      userName: "user2",
      password: "user2@123"
    }
  ];

  IsAuthorized=false;

  Clickedlogin(){    
    const name=this.login.userName;
    const password=this.login.password;
    const user = this.users.filter(currUser => currUser.userName === name && currUser.password === password)[0];
    if (user) {
      this.IsAuthorized=true;
      this._router.navigate(['/book-ride']);
    } 
    else {
      this.IsAuthorized=false;
      this._router.navigate(['/login']);
    }   
  }

  ngOnInit(): void {
  }

}

login.component.html

 <form id="loginform" class="form-horizontal" role="form">                                
     <div style="margin-bottom: 25px" class="input-group">
         User Name 
         <input type="text" class="form-control" name="username" 
         [(ngModel)]="login.userName" #username="ngModel" required>                                        
     </div>                            
     <div style="margin-bottom: 25px" class="input-group">                                   
         Password 
         <input type="password" class="form-control" name="password" 
         #password="ngModel" [(ngModel)]="login.password" required>
     </div>
     <div style="margin-top:10px" class="form-group">
         <div class="col-sm-12 controls">
         <button (click)="Clickedlogin()" class="btn btn-primary">Login</button>
     </div>
   </div>
 </form>      

login.model.ts

   export class Login {
        public userName: string="";
        public password: string="";
    }

Answer 1

One time I forgot to import the FormsModule in my module and I got that same error

/* src/app/app.module.ts */

import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    FormsModule,
    ...
  ],
  ...
})
export class AppModule { }