Sinopec-Anxin/src/app/pages/register/register.component.html

<!-- <div class="login">
  <div class="loginBox">

    <div>
      <div class="card">

        <span class="cardheader">数据采集平台</span>
        <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">

          <div class="input">
            <label class="position">
              <mat-icon>group</mat-icon>
            </label>
            <mat-form-field>
              <input matInput id="companyName" name="companyName" required ngModel placeholder="请输入单位名称">
            </mat-form-field>
          </div>

          <div class="input">
            <label class="position">
              <mat-icon>dns</mat-icon>
            </label>
            <mat-form-field>
              <input matInput id="usci" name="usci" #usci="ngModel"
                pattern="^[0-9A-HJ-NP-RTUW-Y]{2}\d{6}[0-9A-HJ-NP-RTUW-Y]{10}$" ngModel placeholder="请输入统一社会信用代码">
            </mat-form-field>
          </div>
          <div *ngIf="usci.invalid && (usci.dirty || usci.touched)" class="alert-danger">
            <div *ngIf="usci.errors.pattern">
              统一社会信用代码格式为18位字母/数字
            </div>
          </div>

          <div class="input">
            <label class="position">
              <mat-icon>phone</mat-icon>
            </label>
            <mat-form-field>
              <input matInput type="number" id="phone" name="phone" #tel="ngModel" required ngModel
                placeholder="请输入联系电话">
            </mat-form-field>
          </div>


          <div class="input">
            <label class="position">
              <mat-icon>account_box</mat-icon>
            </label>
            <mat-form-field>
              <input matInput id="name" name="name" #name="ngModel" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,19}$" required
                ngModel placeholder="请输入账号">
            </mat-form-field>
          </div>
          <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert-danger">
            <div *ngIf="name.errors.pattern">
              登录账号格式为5-19位字母+数字
            </div>
          </div>

          <div class="input">
            <label class="position">
              <mat-icon>lock</mat-icon>
            </label>
            <mat-form-field>
              <input matInput id="password" name="password" type='password' #password="ngModel" required
                pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.+[\!\@\#\$\%\^\&\*\(\)\-\=\\\`\_\+\|\~\[\]\{\}\;\'\:\,\.\/\<\>\?])[A-Za-z0-9\!\@\#\$\%\^\&\*\(\)\-\=\\\`\_\+\|\~\[\]\{\}\;\'\:\,\.\/\<\>\?]{8,32}$"
                ngModel placeholder="请输入密码">
            </mat-form-field>
          </div>
          <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert-danger">
            <div *ngIf="password.errors.pattern">
              登录密码格式为8-20位,大小写字母+数字+特殊字符
            </div>
          </div>

          <div *ngIf="errmsg" class="alert-danger">
            {{errmsg}}
          </div>
          <div class="register">
            <a href="javascript:void(0);" (click)='toLogin()'>登录账号</a>
            <a href="javascript:void(0);" style="margin-left: 135px;" class="forget">
              注册失败?
              <div class="contactUs">
                <label
                  style="font-size: 14px; text-align: center; width: 100%; display: block; color: #fff;">安信科创QQ号</label>
                <img src="assets/images/AnXinQQ.jpg">
              </div>
            </a>
          </div>

          <button type="submit" [disabled]="!form.form.valid" class="loginbtn" mat-button>注册</button>
        </form>

      </div>
    </div>

  </div>
</div> -->