Angular6+ng-zorro实现登录页面

一、效果图

　　

二、html代码

<div class="login-container">
  <div class="login-box">
    <!-- 账号登录 -->
    <form nz-form [formGroup]="user" class="login-form"  *ngIf="loginMethod">
      <nz-form-item>
        <nz-form-control *ngIf="alertConfig.login_state">
            <nz-alert   [nzType]="alertConfig.alert_type" [nzCloseable]="alertConfig.close_btn" [nzMessage]="alertConfig.alert_msg" [nzShowIcon]="alertConfig.show_icon" (nzOnClose)="afterClose()" style="position: relative;top: -10px;"></nz-alert>
        </nz-form-control>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixUser">
            <input type="text" nz-input formControlName="userName" placeholder="用户名" >
          </nz-input-group>
          <nz-form-explain *ngIf="user.get('userName').dirty && user.get('userName').errors">**用户名不能为空!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixLock">
            <input type="password" nz-input formControlName="password" placeholder="密码" autocomplete="on" />
          </nz-input-group>
          <nz-form-explain *ngIf="user.get('password').dirty && user.get('password').errors">**密码不能为空!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      
      <nz-form-item style="margin-bottom:0px;">
        <nz-form-control>
          <button nz-button class="login-form-button" nzType="primary" (click)="login()" #login_elem [nzLoading]="isLoadingOne">{{logintext}}</button>
          <p>
            <a style="color: #1890ff;position: relative;text-align: center;line-height: 30px;vertical-align: middle;top: 12px;left: 15px;">
              {{version}}
            </a>
            <a (click)="swithLoginMethod()" style="color: #1890ff;position: relative;text-align: right;top: 20px;right: -80px;">
              <!-- 扫码登录 -->
              <i nz-icon type="qrcode" style="font-size: 30px; color: #08c;" theme="outline"></i> 
            </a>
          </p>
        </nz-form-control>
      </nz-form-item>
    </form>

    <ng-template #prefixUser><i nz-icon type="user" style="color:#88bdf3"></i></ng-template>
    <ng-template #prefixLock><i nz-icon type="lock" style="color:#88bdf3"></i></ng-template>


    <!-- 扫码登录 -->
    <form nz-form  class="login-form" [hidden]="loginMethod">

        <nz-form-item style="margin-bottom:0px;">
            <p *ngIf="qrcodeStatus" style="color: #bae7ff;margin-top: -10px;margin-bottom: 20px;">请用<span style="color: #1890ff;padding: 0 4px;font-weight: 300;font-size: 15px;">电站管家app</span>扫描二维码安全登录</p>
            <p *ngIf="!qrcodeStatus" style="color: #bae7ff;margin-top: -10px;margin-bottom: 20px;">
              <i nz-icon type="exclamation-circle" theme="outline" style="color:red;"></i>&nbsp;
              二维码已失效，请<a (click)="refreshQrcode()">刷新</a>重试
            </p>
            <p style="min-height:80px;">
                <ng-container #code_container>
                    <!-- <img src="assets/images/app.png" style="50%;" alt=""> -->
                </ng-container>
            </p>
        </nz-form-item>

        <nz-form-item style="position: relative;left: 0px;margin-top:0px;">
            <button nz-button class="login-form-button"  [nzType]="'primary'" (click)="swithLoginMethod()">返回</button>
        </nz-form-item>
       
    </form>


    <ng-template #code_tpl style="background-color:white;">
      <qrcode [qrdata]="qrcodeuuid" [size]="128" [level]="'M'" [colorlight]="'#000000'" [colordark]="'#ffffff'" style="position: relative;left: 24%;background-color: white; "></qrcode>
    </ng-template>

    
  </div>
</div>

三、说明

　　ng-zorro 框架使用可参照其官网，详见：https://ng.ant.design/docs/introduce/zh。