验证角度2中的登录表单

时间：2017-12-07 09:18:39

标签： angular

我已经使用其余的微服务成功实现了Http post请求。

使用帖子请求实现登录应用程序。

但我无法将验证设置为我的登录表单。如果输入的凭据不正确，表单应显示一条消息＆＃34;用户名/密码无效。

下面显示的是我的代码

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from "./header.component";
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

import { GetService } from './home/get.service';
import { PostService } from './login/post.service';

import { routing } from "./app.routing";
import { RouterModule, Routes} from '@angular/router';


import { FormsModule ,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({

  declarations: [AppComponent,HeaderComponent,LoginComponent,HomeComponent],

  imports: [RouterModule,BrowserModule, HttpModule , routing, FormsModule ,ReactiveFormsModule ],

  providers: [GetService,PostService],

  bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'

})
export class AppComponent {
  title = '';
}

app.component.html 

<div style="text-align:justify-all;">
  <h1>
    {{title}}
  </h1>

 <div class="container">
<router-outlet></router-outlet>
</div>

app.routing.ts 

import { Routes, RouterModule } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { HomeComponent } from "./home/home.component";

const APP_ROUTES: Routes = [
{ path: '' , redirectTo: '/homepage', pathMatch: 'full' },
{ path: 'homepage', component: LoginComponent },
{ path: 'homepage/home', component: HomeComponent }
];

export const routing = RouterModule.forRoot(APP_ROUTES);

header.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
})
export class HeaderComponent {}

header.component.html 

<div class="row">
<div class="col-xs-12"><ul class="nav nav-pills">
<li routerLinkActive="active"><a [routerLink]="['/homepage/home']">
<strong>Home</strong></a></li>
<li><a [routerLink]="['/homepage']"><strong>Logout</strong></a></li>
</ul></div>
</div>

这是我的登录组件，我已经实现了帖子请求

login.component.ts 

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PostService } from './post.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})


export class LoginComponent {
  data:any;

  constructor(private router:Router ,private MyService: PostService){ }

 checkByCredential(username: string, password: string) 
 {
   this.MyService.checkByCredential(username, password)
      .subscribe(users => {
           if(users)
              this.router.navigate(['homepage/home']);
           else
              this.router.navigate(['homepage']); 
           }   );
                }}

login.component.html 

<div class="container formWidth" style="text-align:center;">
  <h1> eSpace Login</h1><hr>
<br/>
     <h2>Login</h2>
    <form role="form">
      <div ng-control-group="credentials">
        <label for="username">Username</label>
        <input
          type="text"
          #username
          id="username"
          ng-control="username"
          required>
<br/>
        <label for="password">Password</label>
        <input
          type="password"
          #password
          id="password"
          ng-control="password"
          required>
      </div>
      <button type="button" (click)="checkByCredential(username.value,password.value)">Login</button>
    </form>
</div>

post.service.ts 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class PostService {
constructor(private http:Http) { }

 checkByCredential(username: string, password: string) {
 const user = { username: username, password: password };
 return this.http
    .post('http://localhost:8080/checkByCredential', user) 
    .map(result => result.json());
  } }

这是我的家庭组件，我实现了get请求

home.component.ts 

import { Component} from '@angular/core';
import { GetService } from './get.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent{ 
title :string; 
data:any; 

constructor(private MyService: GetService){ 
this.title="Angular Service";  
} 

onClickToLoadUsers(e: any): void { 
this.loadUsers() 
e.preventDefault() 
} 

loadUsers() { 
this.MyService.GetUsers().subscribe(users => this.data = users); 
} 
}

home.component.html 

    <app-header></app-header>
    <hr>
<p> <strong> Welcome to eSpace Home </strong></p>

<!-- <img src="/../../assets/i9.jpeg" class="img-rounded" alt="home" 
height="400" width="1150">-->

    <div style="margin-left:50px; height: 200px; overflow: auto;"> 
        <h4>Angular GET service</h4><hr>
    <button (click)="onClickToLoadUsers($event)">Load user</button><br/>
<br/>
             <table>
                 <tr><td>Username</td>&emsp;&emsp;<td>Password</td></tr>
                 <tr *ngFor= " let item of data">
             <td>{{ item.username }}</td>&emsp;&emsp;<td>{{ item.password }}
</td>
             </tr>
             </table>
            </div>

get.service.ts 

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class GetService {
constructor(private http:Http) { }


GetUsers(){
  return this.http.get('http://localhost:8080/checkUsers')
    .map(result => result.json());
           }
 }

当我使用不在我的数据库中的用户名和密码提交表单时，它应该显示一条消息＆＃34;用户名和密码无效＆＃34;。

任何人都可以帮助我在我的申请中实施被动表格。

1 个答案:

答案 0 :(得分：2)

请检查以下代码并与您的代码进行比较，我在下面的代码中用**符号提及我，并在代码中进行更改。 

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PostService } from './post.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})


export class LoginComponent {
  data:any;
 **IsLoggined:boolean = true;**

  constructor(private router:Router ,private MyService: PostService){**this.IsLoggined = true;** }

 checkByCredential(username: string, password: string) 
 {
   this.MyService.checkByCredential(username, password)
      .subscribe(users => {
           if(users)
              this.router.navigate(['homepage/home']);
           else
              **this.IsLoggined=false; 
               return false;**
           }   );
                }}

login.component.html 

    <div class="container formWidth" style="text-align:center;">
      <h1> eSpace Login</h1><hr>
    <br/>
         <h2>Login</h2>
        <form role="form">
  **<div [hidden]='IsLoggined'  style="background-color:red;color:white"> invalid username and password </div>**
          <div ng-control-group="credentials">
            <label for="username">Username</label>
            <input
              type="text"
              #username
              id="username"
              ng-control="username"
              required>
    <br/>
            <label for="password">Password</label>
            <input
              type="password"
              #password
              id="password"
              ng-control="password"
              required>
          </div>
          <button type="button" (click)="checkByCredential(username.value,password.value)">Login</button>
        </form>
    </div>
相关问题
最新问题