select 选择器

下拉选择器。

代码演示

基础样例

最简单的用法。

import { Component, ViewChild } from '@angular/core';
import { SFSchema, SFSelectWidgetSchema, SFComponent } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
@Component({
  selector: 'form-select-simple',
  template: `
    <sf #sf [schema]="schema" (formSubmit)="submit($event)"></sf>
    <button nz-button (click)="updateStatus()">Update Status</button>
  `,
})
export class FormSelectSimpleComponent {
  @ViewChild('sf', { static: false }) private sf: SFComponent;
  schema: SFSchema = {
    properties: {
      status: {
        type: 'string',
        title: '状态',
        enum: [
          { label: '待支付', value: 'WAIT_BUYER_PAY' },
          { label: '已支付', value: 'TRADE_SUCCESS' },
          { label: '交易完成', value: 'TRADE_FINISHED' },
        ],
        default: 'WAIT_BUYER_PAY',
        ui: {
          widget: 'select',
        } as SFSelectWidgetSchema,
      },
      // 标签
      tags: {
        type: 'string',
        title: '标签',
        enum: [
          { label: '待支付', value: 'WAIT_BUYER_PAY' },
          { label: '已支付', value: 'TRADE_SUCCESS' },
          { label: '交易完成', value: 'TRADE_FINISHED' },
        ],
        ui: {
          widget: 'select',
          mode: 'tags',
        } as SFSelectWidgetSchema,
        default: null,
      },
      // 异步数据
      async: {
        type: 'string',
        title: 'Async',
        default: 'WAIT_BUYER_PAY',
        ui: {
          widget: 'select',
          asyncData: () =>
            of([
              {
                label: '订单状态',
                group: true,
                children: [
                  { label: '待支付', value: 'WAIT_BUYER_PAY' },
                  { label: '已支付', value: 'TRADE_SUCCESS' },
                  { label: '交易完成', value: 'TRADE_FINISHED' },
                ],
              },
            ]).pipe(delay(1200)),
        } as SFSelectWidgetSchema,
      },
    },
  };
  constructor(public msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
  updateStatus() {
    const statusProperty = this.sf.getProperty('/status')!;
    statusProperty.schema.enum = ['1', '2', '3'];
    statusProperty.widget.reset('2');
  }
}

联动

省市联动是典型的例子。

import { Component, ViewChild } from '@angular/core';
import { SFComponent, SFSchema, SFSelectWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of } from 'rxjs';
import { delay, tap } from 'rxjs/operators';
@Component({
  selector: 'form-select-coordinate',
  template: ` <sf #sf [schema]="schema" [formData]="data" (formSubmit)="submit($event)"></sf> `,
})
export class FormSelectCoordinateComponent {
  @ViewChild('sf', { static: false }) private sf: SFComponent;
  data = {
    province: 'Zhejiang',
    city: 'Ningbo',
  };
  private cityData: { [place: string]: string[] } = {
    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
  };
  schema: SFSchema = {
    properties: {
      province: {
        type: 'string',
        title: 'Province',
        ui: {
          widget: 'select',
          asyncData: () =>
            of(['Zhejiang', 'Jiangsu']).pipe(
              delay(100),
              tap(() => this.updateCity(this.data.province, this.data.city)),
            ),
          change: i => this.updateCity(i),
        } as SFSelectWidgetSchema,
      },
      city: {
        type: 'string',
        title: 'City',
        ui: {
          widget: 'select',
        } as SFSelectWidgetSchema,
      },
    },
  };
  constructor(public msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
  private updateCity(province: string, city: string = ''): void {
    const cityProperty = this.sf.getProperty('/city')!;
    const items = this.cityData[province];
    cityProperty.schema.enum = items;
    cityProperty.widget.reset(city || items[0]);
  }
}

扩展菜单

使用 dropdownRender 对下拉菜单进行自由扩展。

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { SFComponent, SFSchema, SFSelectWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'form-select-custom-dropdown-menu',
  template: `
    <sf #sf *ngIf="schema" [schema]="schema" (formSubmit)="submit($event)"></sf>
    <ng-template #dropdownRender>
      <nz-divider></nz-divider>
      <div class="container">
        <input type="text" nz-input #inputElement />
        <a class="add-item" (click)="addItem(inputElement)"><i nz-icon nzType="plus"></i> Add item</a>
      </div>
    </ng-template>
  `,
  styles: [
    `
      nz-divider {
        margin: 4px 0;
      }
      .container {
        display: flex;
        flex-wrap: nowrap;
        padding: 8px;
      }
      input {
      }
      .add-item {
        flex: 0 0 auto;
        padding: 8px;
        display: block;
      }
    `,
  ],
})
export class FormSelectCustomDropdownMenuComponent implements OnInit {
  @ViewChild('sf', { static: false }) private sf: SFComponent;
  @ViewChild('dropdownRender', { static: true }) private dropdownRender!: TemplateRef<void>;
  schema: SFSchema;
  statusList: string[] = ['1', '2', '3'];
  constructor(private msg: NzMessageService) {}
  submit(value: any) {
    this.msg.success(JSON.stringify(value));
  }
  ngOnInit(): void {
    this.schema = {
      properties: {
        status: {
          type: 'string',
          title: '状态',
          enum: this.statusList,
          default: '1',
          ui: {
            widget: 'select',
            dropdownRender: this.dropdownRender,
          } as SFSelectWidgetSchema,
        },
      },
    };
  }
  addItem(input: HTMLInputElement): void {
    this.statusList.push(input.value);
    const statusProperty = this.sf.getProperty('/status')!;
    statusProperty.schema.enum = this.statusList;
    this.sf.setValue('/status', input.value);
  }
}

API

schema 属性

ui 属性