<form nz-form nc-adaptive-form [formGroup]="_userForm" nz-row [nzGutter]="24">

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>机构</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-tree-select
          formControlName="organizationId"
          nzPlaceHolder="请选择机构"
          [nzDropdownStyle]="{ maxHeight: '360px', overflow: 'auto' }"
          [nzNodes]="_organizationTreeNodeOptionList"
          nzShowSearch
          nzDefaultExpandAll></nz-tree-select>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>账号</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="account" placeholder="请输入账号">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_userForm.controls.password.enabled">
    <nz-form-item>
      <nz-form-label nzRequired>密码</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input formControlName="password" nz-input placeholder="请输入密码" [type]="_passwordVisible ? 'text' : 'password'">
        <ng-template #passwordSuffixTemplate>
          <i nz-icon [nzType]="_passwordVisible ? 'eye-invisible' : 'eye'" (click)="_passwordVisible = !_passwordVisible"></i>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>姓名</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="name" placeholder="请输入姓名">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>手机号</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="mobileNumber" placeholder="请输入手机号">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label>身份证号</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="identityCardNumber" placeholder="请输入身份证号">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label>性别</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-radio-group formControlName="gender" nzButtonStyle="solid">
          <label nz-radio-button nzValue="男">男</label>
          <label nz-radio-button nzValue="女">女</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label>邮箱</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="email" placeholder="请输入邮箱">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>有效状态</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-switch formControlName="enabled" nzCheckedChildren="有效" nzUnCheckedChildren="无效"></nz-switch>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label>角色</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-select formControlName="roles" nzPlaceHolder="请选择角色" nzMode="multiple" [nzLoading]="_roleLoading" [compareWith]="_entityCompareWith" nzShowSearch nzAllowClear>
          <nz-option *ngFor="let role of _roleList" [nzLabel]="role.name" [nzValue]="role"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </div>

</form>

<ng-template #controlErrorTemplate let-control>
  <div *ngFor="let error of control.errors | keyvalue">{{ error.value }}</div>
</ng-template>
