ngBootstrap typeahead 对象作为输入值

Question

我正在使用 NgBootstrap TypeAhead 在表单中集成查找。我有items json 如下：

type Item = {name: string, description: string};

const items:Item[] = [
    {"name":"NAME-1", "description":"Description -1"},
    {"name":"NAME-2", "description":"Description -2"},
]

并有一个格式化程序，例如：

 formatter = (item: Item) => {
     return item.name;     
 }

对于我添加的 HTML：

<input 
    id="typeahead-focus" 
    type="text" [formControlName]="idx" 
    (selectItem)="selectedItem($event, idx)" 
    [ngbTypeahead]="ItemSearch" 
    [inputFormatter]="formatter" 
    [resultFormatter]="formatter" 
    [editable]='false' 
/>

它工作正常，但我在提交表单时遇到了一个问题。我只需要name 索引作为输入字段的值。但它正在提交不需要的完整 JSON 对象。如何解决这个问题？

Answer 1

您可以简单地，在提交中，在发送到服务之前，获取值

submit(form)
{
   if (form.valid)
      form.value.idx=form.value.idx.name
}

另一种方法是使用辅助变量“模型”并使用 [ngModel] 和 (ngModelChange) 之类的

<input id="typeahead-template" type="text" class="form-control"
        [ngModel]="model"  
        (ngModelChange)="model=$event;
           form.get('idx').setValue($event['name'])"
        [ngModelOptions]="{standalone:true}"
        [ngbTypeahead]="search" [resultTemplate]="rt"
        [inputFormatter]="formatter" />

小心，如果你使用这个，当创建你需要的表单时，你需要给“模型”赋值