Ng-zorro-antd: Select如何实现可选可输的功能

[alexspring123]

需要单选下拉框，如果选项值中不存在时，允许用户输入一个值
目前能否支持？如何实现？

[vthinkxie]

not supported yet.

[tigercosmos]

我覺得這是範例中「带搜索框」－－展开后可对选项进行搜索，的變形版。
應該可以由這個範例來改良實現。

[hsuanxyz]

dirty hack 😂 https://stackblitz.com/edit/ng-zorro-antd-select-hack

---

html

<nz-select
      [(ngModel)]="selectedOption"
      (nzSearchChange)="searchChange($event)"
      (ngModelChange)="modelChange($event)"
      [nzShowSearch]="true">
      <nz-option
        *ngFor="let option of searchOptions"
        [nzLabel]="option.label"
        [nzValue]="option"
        [nzDisabled]="option.disabled">
      </nz-option>
</nz-select>

typescript

export class NzSelectSearchComponent implements OnInit {
  selectedOption;
  defaultSearchOptions = [];
  newOption;

  get searchOptions() {
    if (this.newOption) {
      return [this.newOption, ...this.defaultSearchOptions]
    } else {
      return this.defaultSearchOptions;
    }
  }

  constructor() {
  }

  searchChange($event) {
    if (!$event) {
      this.newOption = null;
      return
    }
    if ($event && this.defaultSearchOptions.findIndex(e => e.value === $event) === -1) {
      this.newOption = { value: $event, label: $event }
    }
  }

  modelChange() {
    if (this.newOption && this.newOption.value) {
      this.defaultSearchOptions.push(Object.assign({}, this.newOption));
      setTimeout(() => {
        this.selectedOption = this.defaultSearchOptions[this.defaultSearchOptions.length - 1];
      }, 100);
      this.newOption = null;
    }
  }

  ngOnInit() {
    this.defaultSearchOptions = [
      {value: 'jack', label: 'Jack'},
      {value: 'lucy', label: 'Lucy'},
      {value: 'tom', label: 'Tom'}
    ];
    this.selectedOption = this.defaultSearchOptions[0];
  }
}

[xingkoo]

赞！

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.