Input complete automatically.

Data Source


Every filter after data got is filtered by filterOption, data source is from asyncData, enum.

Email postfix is automatically added when it is schema.format: 'email', by default, it is ['', '', '', '', ''], can adjust the value by setting enum or global config uiEmailSuffixes


Every filter after data got is filtered by filterOption, data source is from asyncData.


Basic Usage

Simplest of usage.

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

  selector: 'form-autocomplete-simple',
  template: `<sf [schema]="schema" (formSubmit)="submit($event)"></sf>`,
export class FormAutocompleteSimpleComponent {
  schema: SFSchema = {
    properties: {
      format: {
        type: 'string',
        title: 'Format',
        format: 'email',
      widget: {
        type: 'string',
        title: '指定widget',
        ui: {
          widget: 'autocomplete',
          type: 'email',
        } as SFAutoCompleteWidgetSchema,
      async: {
        type: 'string',
        title: '异步',
        ui: {
          widget: 'autocomplete',
          debounceTime: 100,
          asyncData: input =>
                ? [
                    { label: input, value: 1, otherData: 1 },
                    { label: input + input, value: 2 },
                : [],
          change: (comp, data) => console.log(comp, data),
        } as SFAutoCompleteWidgetSchema,
        default: 'asdf',

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {



[enum]Static data sourceSFSchemaEnumType[]-
[readOnly]Read onlyboolean-


[asyncData]Realtime data(input: string) => Observable<SFSchemaEnumType[]>-
[size]Szie, equals to nzSizestring-
[filterOption]Whether filter by input, by default, only apply to label and filter through indexOf case insensitive. When it's a function, accept inputValue and option parameters, return true when option match search criteria, otherwise, return falseboolean or (inputValue: string, option: SFSchemaEnum) => booleantrue
[type]Mode, automatically complete common email postfix, can set new postfix by setting enumemail-
[debounceTime]debounce time, minimum is 50 by default when it's realtime data source, unit: millisecondnumber0
[defaultActiveFirstOption]Whether active the first item by defaultbooleantrue
[backfill]Fill selected value into input when keyboard selection options is usedbooleanfalse
[nzWidth]Customize width, unit is pxnumberTrigger width of element
[change]Change callback(item: NzAutocompleteOptionComponent, orgData: SFSchemaEnum) => void-