Ho do I implement the property converter for value providers in RAD data Form - nativescript-angular

Question

I have a RAD data form in my nativescript-angular app. The form has two fields for ID type and ID number. The ID type field is a picker that displays data from a backend service. My source Object looks like:
this.mySourceObj = new User("Passport Id", "A2653JHSJ12");
I want my source object to store the value of the ID type as a string.
So I changed the editors using HTML markup, like:
<TKEntityProperty
tkDataFormProperty
name="idType"
displayName="Id Type"
index="1"
[valuesProvider]="idTypesProvider"
>
<TKPropertyEditor
tkEntityPropertyEditor
type="Picker"
></TKPropertyEditor>
</TKEntityProperty>
and in my ts file I register my valueproviders like:
this.idTypesProvider = {
key: "id",
label: "name",
items: [...idTypesArr]
};
With this set, my picker editor gets populated with the data but when I select one item, it does not reflect in my code so at the time of form submission the field is null.
I would like to get the value of the selected item as a complete object i.e. (id, name, ...).
I have tried using the property committed event to get the committed value but it is logs an index value of the item.
if (args.propertyName === "idType") {
const selectedIdType = this.mySourceObj.idType;
console.log(`the committed id type is :`, selectedIdType);
} else {
console.log("No property selected");
}
I have also come across the property convert that is attatched in the dom like:
<TKEntityProperty
tkDataFormProperty
name="idType"
displayName="Id Type"
index="1"
[converter]="valsConverter"
[valuesProvider]="idTypesProvider"
>
<TKPropertyEditor
tkEntityPropertyEditor
type="Picker"
></TKPropertyEditor>
</TKEntityProperty>
But I do not know how to implement the "Converter". Any help is highly appreciated.
I want a situation where when the user selects an ID type, my console can log The complete object of the selected Item.