Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(click' is not a valid attribute name

Question

This is my Angular code for login registration form

Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '(click' is not a valid attribute name. Error: Failed to execute 'setAttribute' on 'Element': '(click' is not a valid attribute name.

it gives me a blank page and error like above.. where is the problem in this code

login.component.html file

<div class="container">
    <h2>Vertical (basic) form</h2>
    <form #loginform="ngForm" (ngSubmit)="loginUser()">
      {{loginform.form.valid}}
      <small class="text-danger">
        {{msg}}
      </small>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control"  placeholder="Enter email" name="email" [(ngModel)]="user.emailId" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required #email="ngModel"
        [class.is-invalid]="email.invalid && email.touched"
        >
       <!-- <small class="text-danger" [class.d-none]="email.valid || email.untouched">Email Id is required field</small> -->
        <div *ngIf="email.errors && (email.invalid && email.touched)">
          <small class="text-danger" *ngIf="email.errors.required" >Email is required field</small>
          <small class="text-danger" *ngIf="email.errors.pattern" >Enter the valid Email id</small>
        </div>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control"  placeholder="Enter password" name="password" [(ngModel)]="user.password" #password="ngModel" required
        [class.is-invalid]="password.invalid && password.touched"
        >
        <small class="text-danger" [class.d-none]="password.valid || password.untouched">Password Id is required field</small>
      </div>
      <div class="checkbox">
        <label><input type="checkbox" name="remember"> Remember me</label>
      </div>
      <button [disabled]="loginform.form.invalid" type="submit" class="btn btn-info">Login</button>
    </form>
    <small class="float-right" (click="gotoregistration()")>New User ? Register here</small>
  </div>

login.component.ts file

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';
import { RegistrationService } from '../registration.service';
import { User } from '../user';
//import { Route } from '@angular/compiler/src/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
user = new User();
msg='';

  constructor(private _service : RegistrationService , private _router : Router ) { }

  ngOnInit(): void {
  }

  loginUser(){
    this._service.loginUserFormRemote(this.user).subscribe(
      data =>{

        console.log("response recieved");
        this._router.navigate(['/loginsuccess'])
    },
      error =>{console.log("exception occured");
          this.msg="bad credantial,plz enter valid email";
    }
      
    )

  }
  gotoregistration(){
    this._router.navigate(['/registration'])

  }

  }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { LoginsuccessComponent } from './loginsuccess/loginsuccess.component';
import { RegistrationComponent } from './registration/registration.component';


const routes: Routes = [
  {path:'',component:LoginComponent},
  {path:'loginsuccess',component:LoginsuccessComponent},
  {path:'registration',component:RegistrationComponent},
];

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

Answer 1

我不熟悉 angular，但不应该是(click)="gotoregistration()"而不是(click="gotoregistration()")吗？