0

ng-select multi select を使用して、カスタム先行入力フィールドを備えた正式なフォームがあります。現在、キーと値のペアの配列を発行しています。値だけの配列を発行する必要があります。これは大まかに簡単な作業のようですが、それを行う方法を見つけるのに苦労しています。さまざまなことを試しているので、更新を投稿します。モデルを傍受して再フォーマットするヘルパーを作成できますが、フォームコントロール内でそれを行うためのクリーンな方法が必要です。

typeahead.component.ts

@Component({
  selector: 'app-kup-typeahead',
  template: `
    <ng-select
      [items]="options$ | async"
      [ngClass]="{'ng-select-required': to.required}"
      [placeholder]="to.label"
      [typeahead]="search$"
      [formControl]="formControl"
      [multiple]="to.multiple"
      (change)="onChange($event)"
    >
    </ng-select>
  `,
})
export class KupTypeaheadComponent extends FieldType implements OnInit, OnDestroy {
  onDestroy$ = new Subject<void>();
  search$ = new EventEmitter();
  options$;

  ngOnInit() {
    this.options$ = this.search$.pipe(
      takeUntil(this.onDestroy$),
      startWith(''),
      filter(v => v !== null),
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(this.to.search$),
    );

    this.options$.subscribe();
  }

  ngOnDestroy() {
    this.onDestroy$.complete();
  }

  onChange(item: any) {
    console.warn('onChange ', item);
  }
}

form-config.ts

   {
      key: 'genotype.ploidy',
      id: 'filter_ploidy',
      type: 'kup-typehead',
      templateOptions: {
        label: 'Filter by Ploidy',
        multiple: true,
        options: of(res['creation_method']),
        search$: (term: string) => {
          return this.dropdownService.getDropdown('genotypes/ploidies', '', '', term);
        }
      }
    }
4

1 に答える 1