0

我有一个使用 ng-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);
  }
}

表单-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

1

我认为，这应该以ng-select某种方式完成，尝试传递bindValue输入（检查他们的文档）。从 Formly 方面来说，我们依靠formControl来控制发出的值，解决方案是移除 [formControl]="formControl"输入并依靠onChange事件但不推荐：

  onChange(item: any) {
    this.formControl.setValue(item);
  }

另一种方法是使用parsers：

export class KupTypeaheadComponent {
  defaultOptions: {
    parsers: [(value) => ...],
  }
}
于 2020-02-25T23:06:37.470 回答