feat:login

README.md

@@ -26,3 +26,12 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
 
+
+<img width="400" height="345" src="https://codechina.csdn.net/sonicwater1/ng-demo/-/raw/master/src/assets/images/img_01.png" />
+
+<img width="400" height="388" src="https://codechina.csdn.net/sonicwater1/ng-demo/-/raw/master/src/assets/images/img_02.png" />
+
+<img width="400" height="388" src="https://codechina.csdn.net/sonicwater1/ng-demo/-/raw/master/src/assets/images/img_03.png" />
+
+<img width="400" height="388" src="https://codechina.csdn.net/sonicwater1/ng-demo/-/raw/master/src/assets/images/img_04.png" />
+

src/app/components/login/login.component.html

@@ -3,14 +3,14 @@
     <div  class="col-center">
       <div id="loginui" class="login-layout">
         <h3 class="login-title">登录管理系统</h3>
-
-        <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit(this)">
+        <p style="margin: 10px 0;color:gray;">用户名: admin 密码: 123456</p>
+        <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit()">
           <nz-form-item>
             <nz-form-label [nzSpan]="4">用户名</nz-form-label>
             <nz-form-control 
               nzHasFeedback 
               [nzSpan]="20"
-              nzErrorTip="Please input your username!"
+              nzErrorTip="请输入用户名"
             >
               <nz-input-group [nzSuffix]="suffixUsername">
                 <input 
@@ -22,14 +22,14 @@
                 />
               </nz-input-group>
               <ng-template #suffixUsername>
-                <!-- <i 
+                <i 
                   nz-icon 
                   class="ant-input-clear-icon" 
                   nzTheme="fill" 
                   nzType="close-circle" 
-                  *ngIf="login.username" 
-                  (click)="login.username = ''"
-                ></i> -->
+                  *ngIf="validateForm.controls.username.value.length>0" 
+                  (click)="validateForm.controls.username.setValue('')"
+                ></i>
               </ng-template>
 
             </nz-form-control>
@@ -39,7 +39,7 @@
             <nz-form-control 
               nzHasFeedback 
               [nzSpan]="20"
-              nzErrorTip="Please input your password!"
+              nzErrorTip="请输入密码"
             >
               <nz-input-group [nzSuffix]="suffixPassword">
                 <input 
@@ -52,14 +52,14 @@
                 />
               </nz-input-group>
               <ng-template #suffixPassword>
-                <!-- <i 
+                <i 
                   nz-icon 
                   class="ant-input-clear-icon" 
                   nzTheme="fill" 
                   nzType="close-circle" 
-                  *ngIf="login.password" 
-                  (click)="login.password = ''"
-                ></i> -->
+                  *ngIf="validateForm.controls.password.value.length>0" 
+                  (click)="validateForm.controls.password.setValue('')"
+                ></i>
                 <i 
                   nz-icon 
                   [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" 
@@ -95,7 +95,9 @@
           </nz-form-item>
         </form>
 
-        <!-- {{JSON.stringify(login)}}  -->
+
+
+        <!-- {{validateForm.controls.username}}  -->
 
         <!-- <ul>
           <li *ngFor="let product of products; index as productId">

src/app/components/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+let { log, info, warn, error } = console;
+import { NzMessageService } from 'ng-zorro-antd/message';
 
 // interface ILogin{
 //   username: string;
@@ -13,7 +15,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 })
 export class LoginComponent implements OnInit {
 
-  constructor(private login: FormBuilder) {}
+  constructor(
+    public login: FormBuilder,
+    private message: NzMessageService
+  ) {}
   JSON = JSON;
   public validateForm!: FormGroup;
   // public products = [
@@ -30,29 +35,39 @@ export class LoginComponent implements OnInit {
   //   username:'',
   //   password:''
   // }
-  public passwordVisible = false;
-  // onLogin(login:ILogin) {
-  //   console.log(login);
-  //   return false;
-  // }
-  onSubmit(obj:any):void{
+  public passwordVisible:Boolean = false;
+  
+  // 提交表单
+  onSubmit():void{
+
+    // 更新表单未通过验证的控件高亮显示
     for (const i in this.validateForm.controls) {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
     }
-    console.log(this.validateForm.status);
-    // return false;
-  }
-  jump(id:number){
-    console.log(id);
-  }
 
+    // 如果验证通过
+    if(this.validateForm.status=='INVALID'){
+      this.message.create('warning', '请填写用户名和密码');
+      return;
+    }
 
+    // 如果验证通过
+    if(this.validateForm.status=='VALID'){
+      let { username, password } = this.validateForm.value;
+      if( username == 'admin' && password == '123456' ){
+        this.message.create('success', '登录成功');
+      }else{
+        this.message.create('error', '用户名密码错误');
+      }
+    }
+  }
 
+  // 初始化
   ngOnInit(): void {
     this.validateForm = this.login.group({
-      username: [null, [Validators.required]],
-      password: [null, [Validators.required]],
+      username: ['', [Validators.required]],
+      password: ['', [Validators.required]],
       remember: [true]
     });
   }