2

这是一个我找不到解决方案的简单问题。我在输入中有一个 typeahead 指令，它允许用户选择一个类别（类别数组示例 - > [{ id: 1as1d, name: 'some category'},...]

如何将 id 值设置为 FormControl 字段（将出现在提交的表单中）并在输入中显示名称（在用户选择时将显示在输入中）？有没有办法将发送的表单中的内容与使用 FormControl 时显示的内容分开？

我只能找到一种方法来显示和设置相同的变量，或者只有 id 或者只有 name。

<input 
    formControlName="category"
    [formControl]="userForm.controls['category']"
    [typeahead]="categoriesObservable"
    (typeaheadLoading)="toggleLoadingCategories($event)"
    (typeaheadNoResults)="toggleNoCategoriesFound($event)"
    (typeaheadOnBlur)="categoryFieldSelected($event)"
    (typeaheadOnSelect)="categoryFieldSelected($event)"
    typeaheadOptionsLimit="7"
    typeaheadOptionField="name"
    placeholder="Choose a category"
    class="form-control"/>
4

3 回答 3

4

您要做的是使用选项模板。

取自http://valor-software.com/ngx-bootstrap/#/typeahead的文档：

<ng-template #customItemTemplate let-model="item" let-index="index">
   <h5>This is: {{model | json}} Index: {{ index }}</h5>
</ng-template>

<pre class="card card-block card-header">Model: {{selected | json}}</pre>
<input [(ngModel)]="selected"
   [typeahead]="states"
   [typeaheadItemTemplate]="customItemTemplate"
   class="form-control">

在此示例中，customItemTemplate 用于显示模型和索引，但可以使用模型的任何属性。在选择时可以发送您选择的整个对象，然后在发送给您的函数中，可以从对象中取出 id 并将其用于您需要的任何东西。

于 2017-06-08T07:56:48.470 回答
2

您可以像以前的答案一样使用模板来选择您希望如何在下拉列表中显示选项，并使用函数categoryFieldSelected(v: any)来选择当您选择其中一个选项时会发生什么。这样，输入字段将具有所选类别的 id+name 的值，但selectedCategoryCode将是您提交表单时使用的值。

private selectedCategoryCode: string = '';

categoryFieldSelected(v: any): void {
    this.selectedCategoryCode = v.item.id;
    this.form.get('category').setValue(v.item.id+' '+v.item.name);
}
于 2017-06-30T15:42:32.263 回答
0

This will sound crazy but stay with me.

Just use a hidden input for the submit form and in the event typeaheadOnSelect assign the id value to the hidden input.

In case of loading data (editing old data) just use the category id to get the text and assign the name value to the typeahead.

Don't forget to use control.updateValueAndValidity() on the hidden input in typeaheadOnSelect event.

于 2017-07-05T16:47:56.637 回答