Mention

Mention widget.

Note

  • You must set valueWith parameter if there is no label property in data.

Data Source

Static

One time fetching data, data source is from asyncData, enum.

Realtime

Every select triggers a HTTP request, data source is from asyncData.

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { SFMentionWidgetSchema, SFSchema } from '@delon/form';
import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of, delay } from 'rxjs';

const DATA = ['asdf', 'cipchk', '中文', 'にほんご'];

@Component({
  selector: 'form-mention-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
})
export class FormMentionSimpleComponent {
  schema: SFSchema = {
    properties: {
      remark: {
        type: 'string',
        title: '描述',
        enum: DATA,
        minimum: 2,
        maximum: 5,
        ui: {
          widget: 'mention',
          inputStyle: 'textarea',
        } as SFMentionWidgetSchema,
      },
      // 异步静态数据源
      async: {
        type: 'string',
        title: 'Async',
        ui: {
          widget: 'mention',
          asynxcData: () => of(DATA).pipe(delay(1000)),
        } as SFMentionWidgetSchema,
      },
      // 实时数据
      real_time: {
        type: 'string',
        title: 'RealTime',
        ui: {
          widget: 'mention',
          loadData: (option: MentionOnSearchTypes) => of(DATA.filter(item => item.indexOf(option.value) !== -1)).pipe(delay(300)),
        } as SFMentionWidgetSchema,
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema

PropertyDescriptionTypeDefault
[enum]Static data sourceSFSchemaEnumType[]-
[readOnly]Read onlyboolean-
[minimum]Minimum time of mentionnumber-
[maximum]Maximum time of mentionnumber-

ui

PropertyDescriptionTypeDefault
[asyncData]Asynchronous static data source(input: string) => Observable<SFSchemaEnumType[]>-
[size]Size, equals to nzSizestring-
[placeholder]Placeholderstring-
[loadData]Realtime data(option: MentionOnSearchTypes) => Observable<SFSchemaEnumType[]>-
[notFoundContent]Content when nothing foundstring无匹配结果,轻敲空格完成输入
[placement]Position of suggestion boxbutton,topbutton
[prefix]Character to trigger to popup dropdown list'string' 'string[]'@
[valueWith]Function that maps a suggestion value(value: any) => string-
[select]Callback when option in dropdown list is selected(value: any) => void-
[inputStyle]Input typetext, textareatext
[autosize]Adaptive content height, set to true|false or object:{ minRows: 2, maxRows: 6 }boolean,AutoSizeTypetrue