ShangHaiYuan-AnXin/src/app/ui/usermanagement/createUser.html

<div class="leftTree">
  <span mat-dialog-title>创建用户</span>
  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">

    <div mat-dialog-content>
        <mat-form-field>
          <input type="text" id="name" matInput pattern="^[a-zA-Z][a-zA-Z0-9_]{4,19}$"
          required ngModel name="name" #name="ngModel" placeholder="登录账号">
        </mat-form-field>
        <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert-danger">
          <div *ngIf="name.errors.pattern">登录名格式为字母开头,5-18位</div>
        </div>
    </div>

    <div mat-dialog-content>
      <mat-form-field>
        <input type="text" matInput required ngModel name="user" #user="ngModel" placeholder="真实姓名">
      </mat-form-field>
    </div>

    <div mat-dialog-content>
      <mat-form-field>
        <input type="text" matInput required ngModel name="post"  placeholder="用户职务">
      </mat-form-field>
    </div>

    <div mat-dialog-content>
      <mat-form-field>
        <input type="tel" matInput pattern="^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$"
        required ngModel name="phone" placeholder="联系电话">
      </mat-form-field>
    </div>

    <div mat-dialog-content>
        <mat-form-field>
          <input type="text" matInput [(ngModel)]="organizationName" disabled required name="organizationName" placeholder="所属机构">
        </mat-form-field>
    </div>
    <div mat-dialog-content>
      <mat-form-field>
        <input type="text" matInput [(ngModel)]="selectedOffices.officeName" disabled name="officeName" placeholder="所属机关">
      </mat-form-field>
    </div>
    <div mat-dialog-content *ngIf="errmsg">
      <p style="font-size: 14px; color: red;">{{errmsg}}</p>
    </div>

    <div mat-dialog-actions>
        <button mat-raised-button color="primary" type="submit" [disabled]="!form.form.valid">确定</button>
        <button mat-raised-button mat-dialog-close>取消</button>
    </div>
  </form>
</div>

<div class="tree">
  <span>请选择所属机构</span>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding  (click)='add(node)' class="organizationlist">
      <button mat-icon-button disabled ></button>
      <li>{{node.name}}</li>
    </mat-tree-node>
  
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding  (click)='add(node)'  class="organizationlist">
      <button mat-icon-button 
              matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      <li>{{node.name}}</li>
    </mat-tree-node>
  </mat-tree>  
</div>
<div class="officesbox">
  <span>请选择机构下属机关</span>
  <div class="officesList">
    <ul>
      <li *ngFor="let item of OfficesList" (click)="selectOffice(item)">{{item.officeName}}</li>
    </ul>
  </div>
</div>