edu-textbook/projects/textbook/src/modules/login/register/register.component.html

<div class="card">
  <div class="resgister-title">欢迎注册</div>
  <!--手机验证码-->
  <div class="login-card">
    <nz-input-group nzCompact>
      <nz-select [ngModel]="'86'">
        <nz-option [nzLabel]="'+86'" [nzValue]="'86'"></nz-option>
      </nz-select>
      <input
        type="text"
        nz-input
        [(ngModel)]="mobile"
        [nzStatus]="tbookSer.authMobile(mobile) ? '' : 'error'"
        style="width: 230px"
        placeholder="请填写手机号"
      />
    </nz-input-group>

    <div class="login-input-box local-code">
      <input
        nz-input
        class="code-input"
        type="text"
        [(ngModel)]="localCodeNum"
        maxlength="4"
        placeholder="验证码"
        [nzStatus]="localCodeNum.length == 4 ? '' : 'error'"
      />
      <!-- <app-canvas-code
        [canvas_id]="'canvas_register'"
        [(drawCode)]="drawCode"
        #codelogin
      ></app-canvas-code> -->
    </div>
    <div class="login-input-box">
      <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
        <input
          type="text"
          nz-input
          placeholder="请填写短信验证码"
          class="msg-code"
          placeholder="请填写短信验证码"
          [(ngModel)]="code"
          maxlength="8"
          [nzStatus]="code.length >= 4 ? '' : 'error'"
        />
      </nz-input-group>
      <ng-template #suffixButton>
        <button
          nz-button
          nzType="primary"
          [value]="buttonText"
          [disabled]="isCountingdown"
          (click)="startCountdown()"
        >
          {{ buttonText }}
        </button>
      </ng-template>
    </div>
    <div class="login-input-box">
      <nz-input-group>
        <input
          type="password"
          nz-input
          placeholder="请填写密码（至少8位数)"
          [(ngModel)]="password"
          [nzStatus]="password.length >= 8 ? '' : 'error'"
        />
      </nz-input-group>
    </div>
    <div class="login-input-box">
      <nz-input-group>
        <input
          type="password"
          nz-input
          placeholder="请确认密码"
          [(ngModel)]="confirmPassword"
          [nzStatus]="confirmPassword.length >= 8 ? '' : 'error'"
        />
      </nz-input-group>
    </div>
    <div class="login-submit-btn">
      <!-- <button
        nz-button
        nzType="primary"
        nzBlock
        [nzLoading]="isConfirm"
        (click)="onRegister()"
      >
        注册
      </button> -->
    </div>
  </div>
  <div class="card-fonter">
    <a class="fonter-left"></a>
    <div class="fonter-right">
      已有账号？<a style="color: #40a9ff" [routerLink]="['/user/login']"
        >去登录</a
      >
    </div>
  </div>
</div>