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);
}
}
}