I am trying to create a simple user login and password page not with a back-end service for now.
Once I enter my password I want to route my page to dashboard. I am using core UI framework and Angular 4. Now I have a uncaught error. How can I solve the following errors?
login.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { DashboardComponent } from '../dashboard/dashboard.component';
declare var Dashboard:any;
@Component({
templateUrl: 'login.component.html',
})
export class LoginComponent {
data: any = {};
constructor(private router: Router){}
formSubmit(){
if(this.data.username == "admin" && this.data.password == "admin"){
this.router.navigate([Dashboard]);
}
}
}
login.component.html
<div class="app flex-row align-items-center" (ngSubmit)="formSubmit()">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-group mb-0">
<div class="card p-2">
<div class="card-block">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-1">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Username" [(ngModel)="data.username"]>
</div>
<div class="input-group mb-2">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password" [(ngModel)="data.password" >
</div>
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-primary px-2">Login</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
in your case I have fount the typo in your template like this: <input type="password" class="form-control" placeholder="Password" [(ngModel)="data.password" >
with ] missed at the end of the line before the >
I faced the similar problem, and everything compiled well, but failed at the runtime.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With