Situation Dependent displaywith Property with Formly Autocomplete

I'm using Formly Autocomplete in an Angular v18 project and I'm not sure how to add a displayWith property that will take some function coupled with my Formly Autocomplete field to uniquely display the properties present in the objects I am showing in my Formly field.

autocomplete-type.component.ts

@Component({
selector: 'formly-autocomplete-type',
template: `
<input
matInput
[matAutocomplete]="auto"
[formControl]="formControl"
[formlyAttributes]="field"
[errorStateMatcher]="errorStateMatcher"
/>
<mat-autocomplete
#auto="matAutocomplete"
[autoActiveFirstOption]="true"
[autoSelectActiveOption]="true"
>
<mat-option *ngFor="let value of filter | async" [value]="value">
{{ value }}
</mat-option>
</mat-autocomplete>
`,
})
export class AutocompleteTypeComponent
extends FieldType<FieldTypeConfig>
implements OnInit {}


example of a field

{
key: 'workCenterCode',
type: 'autocomplete',
props: {
required: true,
label: 'Work Center Code',
placeholder: 'Work Center Code',
filter: (term: string) =>
of(
term
? this.workOrderInputsService.filterObjectArray(
term,
this.workCenterCodeArray,
'NAME'
)
: this.workCenterCodeArray.slice()
),
},
},


I know that I can edit the autocomplete component in my project, but I'm not quite sure how to take the last step of providing a flexible value for displayWith.

Continue reading...