ngx-bootstrap typeahead mit FormControl winkel 2

Question

Hier ist ein einfaches Problem, ich kann keine Lösung finden. Ich habe eine typeahead Direktive in der Eingabe, die einem Benutzer eine Kategorie auswählen kann (Kategorie Array Beispiel -> [{ID: 1as1d, Name: 'irgendeine Kategorie'}, ...]

Wie den ID-Wert auf das FormControl-Feld (das im übermittelten Formular angezeigt wird) und den Namen auf der Eingabe anzeigen (der auf der Eingabe angezeigt wird, während der Benutzer die Auswahl trifft) Gibt es eine Möglichkeit, zu trennen, was in der gesendeten Form sein wird und was ist wobei bei der Verwendung von Formcontrol zeigte?

ich nur einen Weg, um das gleiche Variable entweder nur id oder nur Namen anzuzeigen finden konnte und eingestellt.

<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"/> 

Answer 1

Was Sie t wollen o Verwenden Sie eine Vorlage für die Optionen.

aus der Dokumentation bei http://valor-software.com/ngx-bootstrap/#/typeahead Genommen:

<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 diesem Beispiel wird die customItemTemplate das Modell und Index angezeigt werden, aber jede Eigenschaft des Modells verwendet werden kann, verwendet wird. Bei der Auswahl kann das gesamte Objekt Ihrer Auswahl gesendet werden, dann kann es in der Funktion, die es an Sie gesendet wird, die ID aus dem Objekt nehmen und für alles verwenden, was Sie brauchen.

Answer 2

Sie verwenden Vorlage wie in einer previous Antwort, um auszuwählen, wie Sie Optionen im Dropdown anzeigen möchten, und Sie verwenden die Funktion categoryFieldSelected(v: any), um auszuwählen, was passiert, wenn Sie eine der Optionen auswählen. Auf diese Weise hat das Eingabefeld mit dem Wert id + name der ausgewählten Kategorie, aber selectedCategoryCode ist der Wert, den Sie verwenden, wenn Sie das Formular absenden.

private selectedCategoryCode: string = ''; 

categoryFieldSelected(v: any): void { 
this.selectedCategoryCode = v.item.id; 
this.form.get('category').setValue(v.item.id+' '+v.item.name); 
} 

Answer 3

Das klingt verrückt, aber bleib bei mir.

Verwenden Sie einfach eine ausgeblendete Eingabe für das Übermittlungsformular und geben Sie im Fall typeaheadOnSelect den ID-Wert dem verborgenen Eingang zu.

Im Falle des Ladens von Daten (Bearbeiten alter Daten) verwenden Sie einfach die Kategorie-ID, um den Text zu erhalten und den Namenswert der Typehead zuzuordnen.

Vergessen Sie nicht, control.updateValueAndValidity() auf dem versteckten Eingang in typeaheadOnSelect Ereignis zu verwenden.