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

  <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>描述</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <textarea nz-input formControlName="description" placeholder="请输入描述"></textarea>
      </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-select formControlName="dataScope" nzPlaceHolder="请选择数据权限" [nzLoading]="_dataScopeLoading" nzAllowClear>
          <nz-option *ngFor="let dataScope of _dataScopeList" [nzLabel]="dataScope.label" [nzValue]="dataScope.value"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_roleForm.controls.dataScope.value === '自定义数据权限'">
    <nz-form-item>
      <nz-form-label nzNoColon></nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-tree-select
          formControlName="organizations"
          nzPlaceHolder="请选择机构"
          [nzDropdownStyle]="{ maxHeight: '360px', overflow: 'auto' }"
          [nzNodes]="_organizationTreeNodeOptionList"
          nzMultiple
          nzShowSearch
          nzDefaultExpandAll></nz-tree-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>
