user.component.html

<nz-modal [nzWidth]="780" [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <form [formGroup]="validateForm" nz-form>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">用户姓名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="name" id="name">
        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">用户姓名不能为空!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="loginName">登录名</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="loginName" id="loginName">
        <nz-form-explain *ngIf="validateForm.get('loginName').dirty && validateForm.get('loginName').errors">登录名不能为空!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="mobile" nzRequired>手机号码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="mobile"  id="mobile">
        <nz-form-explain *ngIf="validateForm.get('mobile').dirty && validateForm.get('mobile').errors">手机号码错误!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24"   nzRequired>性别</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select id="gender"  formControlName="gender" nzPlaceHolder="选择性别">
          <nz-option nzValue="1" nzLabel="男"></nz-option>
          <nz-option nzValue="0" nzLabel="女"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('gender').dirty && validateForm.get('gender').errors">请选择性别!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="email">邮箱地址</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="email"  id="email">
          <nz-form-explain *ngIf="validateForm.get('email').dirty && validateForm.get('email').errors">邮箱地址格式错误!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="organizeId">所属部门</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select id="orgId" formControlName="organizeId"  nzPlaceHolder="选择部门">
          <ng-container *ngFor="let item of groupList">
            <nz-option  nzValue="{{item.id}}" nzLabel="{{item.name}}"></nz-option>
          </ng-container>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('organizeId').dirty && validateForm.get('organizeId').errors">请选择所属部门!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="comments">职位</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select id="comments" formControlName="comments"  nzPlaceHolder="选择职位">
            <nz-option  nzValue="1" nzLabel="组长"></nz-option>
            <nz-option  nzValue="2" nzLabel="组员"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('comments').dirty && validateForm.get('comments').errors">请选择职位!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="status">是否有效</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select id="status" formControlName="status">
          <nz-option nzValue="0" nzLabel="有效"></nz-option>
          <nz-option nzValue="1" nzLabel="无效"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('status').dirty && validateForm.get('status').errors">请选择状态!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>