diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 918cb0ed994..9a8acca5cf9 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -558,6 +558,11 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr * @group Props */ @Input() optionLabel: string | ((item: any) => string) | undefined; + /** + * Property name or getter function to use as the value of an option. + * @group Props + */ + @Input() optionValue: string | ((item: any) => string) | undefined; /** * Unique identifier of the component. * @group Props @@ -768,9 +773,13 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr inputValue = computed(() => { const modelValue = this.modelValue(); + const selectedOption = this.optionValueSelected + ? (this.suggestions || []).find((item: any) => ObjectUtils.resolveFieldData(item, this.optionValue) === modelValue) + : modelValue; + if (modelValue) { - if (typeof modelValue === 'object') { - const label = this.getOptionLabel(modelValue); + if (typeof modelValue === 'object' || this.optionValueSelected) { + const label = this.getOptionLabel(selectedOption); return label != null ? label : modelValue; } else { @@ -856,6 +865,10 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr return !this.virtualScroll; } + get optionValueSelected() { + return typeof this.modelValue() === 'string' && this.optionValue; + } + constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig, public overlayService: OverlayService, private zone: NgZone) { effect(() => { this.filled = ObjectUtils.isNotEmpty(this.modelValue()); @@ -1564,7 +1577,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr } getOptionValue(option) { - return option; // TODO: The 'optionValue' properties can be added. + return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option && option.value != undefined ? option.value : option; } getOptionIndex(index, scrollerOptions) {