ngx-formly ng-选择formcontrol更改发射值

Question

我有一个带有自定义typeahead字段的表单，使用ng-select多选。它当前发出一个键值对数组。我需要它发出一个包含正确值的数组。这似乎应该是一项简单明了的任务，但我正在努力想办法做到这一点。当我尝试不同的东西时，我会发布更新。我可以构建一个帮助器来截取模型并重新格式化它，但在formcontrol中必须有一种干净的方法来做到这一点。

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

Answer 1

我认为，这应该由ng-select以某种方式完成，试着传递bindValue输入(查看他们的文档)。从形式上讲，我们依赖formControl来控制发出的值，解决方案是删除[formControl]="formControl"输入并依赖onChange事件，但不推荐：

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

另一种方法是使用parsers

export class KupTypeaheadComponent {
  defaultOptions: {
    parsers: [(value) => ...],
  }
}