[英]ngx-bootstrap typeahead with FormControl angular 2
here is a simple problem I can't find a solution to. 这是一个简单的问题,我找不到解决方案。 I have a typeahead directive in input which lets a user to choose a category ( category array example -> [{ id: 1as1d, name: 'some category'},...]
我在输入中有一个typeahead指令,该指令可让用户选择一个类别(类别数组示例-> [{id:1as1d,名称:'some category'},...]
How to set the id value to the FormControl field (which will appear in the submitted form) and display the name on the input (which will be showed in on the input while user is choosing)? 如何设置id值到FormControl字段(将出现在提交的表单中)并在输入中显示名称(在用户选择时显示在输入中)? Is there a way to separate what will be in the sent form and what is being showed while using FormControl?
有没有一种方法可以分隔使用FormControl时发送的表单中的内容和显示的内容?
I could only find a way to display and set the same variable either only id or only name. 我只能找到一种方法来显示和设置仅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"/>
What you want to do is use a template for the options. 您要做的是使用模板作为选项。
Taken from the documentation at http://valor-software.com/ngx-bootstrap/#/typeahead : 取自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">
In this example the customItemTemplate is used to display the model and index but any property of the model can be used. 在此示例中,customItemTemplate用于显示模型和索引,但是可以使用模型的任何属性。 On selection the whole object of your selection can be sent, then in the function it is sent to you can take the id out of the object and use it for anything you need.
选择时,可以发送所选对象的整个对象,然后在将其发送给您的函数中,可以从对象中取出ID,并将其用于所需的任何对象。
You use template like in a prevous answer to choose how you want to show options in the dropdown and you use function categoryFieldSelected(v: any)
to choose what happens when you select one of the options. 您可以像在上一个答案中那样使用模板来选择要在下拉菜单中显示选项的方式,并使用功能
categoryFieldSelected(v: any)
选择在选择其中一个选项时会发生什么。 This way the input field witll have the value of the id+name of the selected category, but the selectedCategoryCode
will be the value you use when you submit the form. 这样,输入字段将具有所选类别的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);
}
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. 只需对提交表单使用隐藏的输入,然后在
typeaheadOnSelect
事件中将ID值分配给隐藏的输入。
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. 在加载数据(编辑旧数据)的情况下,只需使用类别ID即可获取文本并将名称值分配给预输入。
Don't forget to use control.updateValueAndValidity()
on the hidden input in typeaheadOnSelect
event. 不要忘记在
typeaheadOnSelect
事件中的隐藏输入上使用control.updateValueAndValidity()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.