错误:未捕获(在承诺中):无效字符错误:无法对"元素"执行'setAttribute':'(click'不是有效的属性名称



这是我的登录注册表的Angular代码

错误:未捕获(承诺中(:InvalidCharacterError:未能在"Element"上执行"setAttribute":"(click"不是有效的属性名称。错误:未能在"Element"上执行"setAttribute":"(单击(不是有效的特性名称。

它给了我一个空白页和上面的错误。。这个代码的问题在哪里

login.component.html文件

<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>

登录组件.ts文件

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'])
}
}

应用程序路由模块.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 { }

我不熟悉angular,但它不应该是(click)="gotoregistration()"而不是(click="gotoregistration()")吗?

相关内容

最新更新