Login submit refresh the page with email and password in url, use of button click not Posting email and password in onLogin() method

Issue

below is my html and component code.

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1>Heath-Dashboard</h1>
            <form role="form">
                <div class="form-content">
                    <div class="form-group">
 
                        <input type="text" class="form-control  input-underline input-lg" id="email" placeholder="enter email" ng-model="user.email" name="email" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control input-underline input-lg" id="password" placeholder="enter password" ng-model="user.password" name="password" required>
                        
                    </div>
                </div>
                <button class="btn rounded-btn" (click)="onLogin()"> Log in </button>
          
                &nbsp;
                <a class="btn rounded-btn" [routerLink]="['/signup']">Register</a>
            </form>
        </div>
    </div>
</div>

LoginComponent

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { routerTransition } from '../router.animations';
import { AuthService } from '../shared/services/auth.service';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { User } from '../shared/models/user';
 

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
    animations: [routerTransition()]
})
export class LoginComponent implements OnInit{
    user: User = new User("","");
    constructor(public router: Router,private auth: AuthService) {}
    ngOnInit() {
        // reset login status
    this.auth.logout();
    }
   
    onLogin(): void {
        debugger;
        console.log(this.user.email);
        this.auth.login(this.user)
        .then((user) => {
          localStorage.setItem('token', user.json().auth_token);
          this.router.navigateByUrl('/dashboard');
        })
        .catch((err) => {
          console.log(err);
        });
    }   
    
     onsubmit(): void{
        debugger;
        console.log(this.user.email);
     }
}

When I tried to use submit form page gets refresh and reload again with email and password in url.
When I tried to use button click without submit I am not getting model values.
Please let me know if require more information.

Solution

Use this code , in angular 2 the selector is ngModel not ng-model

<div class="login-page" [@routerTransition]>
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <img src="assets/images/logo.png" width="150px" class="user-avatar" />
            <h1>Heath-Dashboard</h1>
            <form role="form">
                <div class="form-content">
                    <div class="form-group">
 
                        <input type="text" class="form-control  input-underline input-lg" id="email" placeholder="enter email" [(ngModel)]="user.email" name="email" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control input-underline input-lg" id="password" placeholder="enter password" [(ngModel)]="user.password" name="password" required>
                        
                    </div>
                </div>
                <button class="btn rounded-btn" (click)="onLogin()"> Log in </button>
          
                &nbsp;
                <a class="btn rounded-btn" [routerLink]="['/signup']">Register</a>
            </form>
        </div>
    </div>
</div>

Answered By – Miran Parkar

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.