时间戳

首页 > 解决方案 > 登录提交用 url 中的电子邮件和密码刷新页面，使用按钮单击不在 onLogin() 方法中发布电子邮件和密码

angular - 登录提交用 url 中的电子邮件和密码刷新页面，使用按钮单击不在 onLogin() 方法中发布电子邮件和密码

问题描述

下面是我的 html 和组件代码。

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

登录组件

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);
     }
}

当我尝试使用提交表单时，页面会刷新并在 url 中使用电子邮件和密码再次重新加载。当我尝试使用按钮单击而不提交时，我没有获得模型值。如果需要更多信息，请告诉我。

标签： angularangular-ui-router

解决方案

使用此代码，在角度 2 中，选择器ngModel不是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>

推荐阅读