String contains an invalid character?

Question

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>

Pinkard

Answer 1

You need to define the type of your properties. Object does not contain your properties:

interface YourDataType {
    username?: string;
    password?: string;
}

export class LoginComponent {
    data: YourDataType = {};
    // ....
    formSubmit() {
        if (this.data.username == "admin" && this.data.password == "admin") { // No error
        }
    }
}

Or if you don't want to define the types, you can opt-out by specifying the type as any:

export class LoginComponent {
    data: any = {};
    // ....
    formSubmit() {
        if (this.data.username == "admin" && this.data.password == "admin") { // No error
        }
    }
}

Lotus

thank you..,compiled without errors but there is an uncaught error..!! "String contains an invalid character" – Pinkard

Answer 2

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.

Hairworm

Yes, I did solve it :) but thanks for pointing it out. Will be useful for someone :) – Pinkard

Had a similar issue with a random comma character lost in the html tag between all the attributes. – Enwreathe