feat:form

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

@@ -2,33 +2,101 @@
   <div class="row row-center" >
     <div  class="col-center">
       <div id="loginui" class="login-layout">
-        <h3 class="login-title">登录中心</h3>
+        <h3 class="login-title">登录管理系统</h3>
 
-        <form name="form" nz-form>
+        <form nz-form name="form" [formGroup]="validateForm" (ngSubmit)="onSubmit(this)">
           <nz-form-item>
             <nz-form-label [nzSpan]="4">用户名</nz-form-label>
-            <nz-form-control nzHasFeedback [nzSpan]="20">
-              <input nz-input name="username" required />
+            <nz-form-control 
+              nzHasFeedback 
+              [nzSpan]="20"
+              nzErrorTip="Please input your username!"
+            >
+              <nz-input-group [nzSuffix]="suffixUsername">
+                <input 
+                  nz-input 
+                  placeholder="请输入用户名" 
+                  name="username" 
+                  formControlName="username"
+                  required 
+                />
+              </nz-input-group>
+              <ng-template #suffixUsername>
+                <!-- <i 
+                  nz-icon 
+                  class="ant-input-clear-icon" 
+                  nzTheme="fill" 
+                  nzType="close-circle" 
+                  *ngIf="login.username" 
+                  (click)="login.username = ''"
+                ></i> -->
+              </ng-template>
+
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSpan]="4">密&nbsp;&nbsp;&nbsp;&nbsp;码</nz-form-label>
-            <nz-form-control nzHasFeedback [nzSpan]="20">
-              <input nz-input name="password" required />
+            <nz-form-control 
+              nzHasFeedback 
+              [nzSpan]="20"
+              nzErrorTip="Please input your password!"
+            >
+              <nz-input-group [nzSuffix]="suffixPassword">
+                <input 
+                  nz-input 
+                  name="password" 
+                  formControlName="password"
+                  [type]="passwordVisible ? 'text' : 'password'" 
+                  placeholder="请输入密码" 
+                  required
+                />
+              </nz-input-group>
+              <ng-template #suffixPassword>
+                <!-- <i 
+                  nz-icon 
+                  class="ant-input-clear-icon" 
+                  nzTheme="fill" 
+                  nzType="close-circle" 
+                  *ngIf="login.password" 
+                  (click)="login.password = ''"
+                ></i> -->
+                <i 
+                  nz-icon 
+                  [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" 
+                  (click)="passwordVisible = !passwordVisible"
+                ></i>
+              </ng-template>
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
             <nz-form-control [nzSpan]="20" [nzOffset]="4">
+              <div nz-row class="login-form-margin">
+                <div nz-col [nzSpan]="12">
+                  <label nz-checkbox formControlName="remember">
+                    <span>记住我</span>
+                  </label>
+                </div>
+                <div nz-col [nzSpan]="12" style="text-align: right;">
+                  <a class="login-form-forgot">忘记密码?</a>
+                </div>
+              </div>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item>
+            <nz-form-control [nzSpan]="24" [nzOffset]="0" style="text-align: center;">
               <button 
+                type="submit"
                 nz-button 
+                style="width: 100px;" 
                 nzType="primary"
                 ng-disabled="form.$invalid"
-                (click)="onSave('this')"
               >登录</button>
             </nz-form-control>
           </nz-form-item>
         </form>
 
+        <!-- {{JSON.stringify(login)}}  -->
+
         <!-- <ul>
           <li *ngFor="let product of products; index as productId">
             <a [title]="product.name" (click)="jump(product.id)">

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

-import { Component } from '@angular/core';
-
-
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
+// interface ILogin{
+//   username: string;
+//   password: string;
+// }
 
 @Component({
   selector: 'app-component',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit {
+
+  constructor(private login: FormBuilder) {}
   JSON = JSON;
-  public title = { 
-    msg : 'login-component'
-  };
-  public products = [
-    {
-      id:1,
-      name:'foo'
-    },
-    {
-      id:2,
-      name:'bar'
+  public validateForm!: FormGroup;
+  // public products = [
+  //   {
+  //     id:1,
+  //     name:'foo'
+  //   },
+  //   {
+  //     id:2,
+  //     name:'bar'
+  //   }
+  // ]
+  // public login:FormBuilder = {
+  //   username:'',
+  //   password:''
+  // }
+  public passwordVisible = false;
+  // onLogin(login:ILogin) {
+  //   console.log(login);
+  //   return false;
+  // }
+  onSubmit(obj:any):void{
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
     }
-  ]
-  public entity = {
-    username:'',
-    password:''
-  }
-  onSave(str:string) {
-    console.log(str);
-  }
-  onSubmit(obj:any):Boolean{
-    console.log(obj);
-    obj.classList.add('was-validated')
-    return false;
+    console.log(this.validateForm.status);
+    // return false;
   }
   jump(id:number){
     console.log(id);
   }
+
+
+
+  ngOnInit(): void {
+    this.validateForm = this.login.group({
+      username: [null, [Validators.required]],
+      password: [null, [Validators.required]],
+      remember: [true]
+    });
+  }
+
 }

src/app/components/login/login.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { LoginComponent } from './login.component';
 import { NgZorroAntdModule } from '../ng-zorro-antd.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -9,7 +10,9 @@ import { NgZorroAntdModule } from '../ng-zorro-antd.module';
   ],
   imports: [
     BrowserModule,
-    NgZorroAntdModule
+    NgZorroAntdModule,
+    FormsModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [