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="userName">
        <nz-form-explain *ngIf="validateForm.get('name').dirty && validateForm.get('name').errors">用户登录名为6到16个字符!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="phoneNumber"  id="phoneNumber">
        <nz-form-explain *ngIf="validateForm.get('phoneNumber').dirty && validateForm.get('phoneNumber').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-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="organizationId">所属部门</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select id="organizationId" formControlName="organizationId"  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('organizationId').dirty && validateForm.get('organizationId').errors">请选择所属部门!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="position">职位</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select id="position" formControlName="position"  nzPlaceHolder="选择职位">
            <nz-option  nzValue="1" nzLabel="组长"></nz-option>
            <nz-option  nzValue="2" nzLabel="组员"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('position').dirty && validateForm.get('position').errors">请选择职位!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <!--<nz-form-item>-->
      <!--<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired 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>