diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts index efca9f17b..a383ec6d3 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts +++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.spec.ts @@ -249,6 +249,36 @@ describe('PoDynamicViewComponent:', () => { }); describe('setFieldValue:', () => { + it(`should return the labels of the selected options if options exist and a match is found`, () => { + const field = { + value: ['value1'], + optionsMulti: true, + options: [ + { value: 'value1', label: 'label1' }, + { value: 'value2', label: 'label2' }, + { value: 'value3', label: 'label3' } + ] + }; + + field.value = ['value1', 'value2']; + expect(component.setFieldValue(field)).toEqual(['label1', 'label2']); + }); + + it(`should return the field values if options exist but no match is found'`, () => { + const field = { + value: ['value1'], + optionsMulti: true, + options: [ + { value: 'value1', label: 'label1' }, + { value: 'value2', label: 'label2' }, + { value: 'value3', label: 'label3' } + ] + }; + + field.value = ['value4']; + expect(component.setFieldValue(field)).toEqual(['value4']); + }); + it(`should return the label of the selected option if options exist and a match is found`, () => { const field = { value: 'value1', diff --git a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts index 9275dac36..81c428bbe 100644 --- a/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts +++ b/projects/ui/src/lib/components/po-dynamic/po-dynamic-view/po-dynamic-view.component.ts @@ -85,8 +85,13 @@ export class PoDynamicViewComponent extends PoDynamicViewBaseComponent implement setFieldValue(field) { if (field.options) { - const selectedOption = field.options.find(option => option.value === field.value); - return selectedOption ? selectedOption.label : field.value; + if (field.optionsMulti) { + const selectedOptions = field.options.filter(option => field.value.some(value => value === option.value)); + return selectedOptions.length ? selectedOptions.map(option => option.label) : field.value; + } else { + const selectedOption = field.options.find(option => option.value === field.value); + return selectedOption ? selectedOption.label : field.value; + } } else if (field.type === 'boolean' && 'booleanTrue' in field && 'booleanFalse' in field) { return field.value ? field.booleanTrue : field.booleanFalse; } else {