How Can I Bind `tabIndex` to the Current Tab in Formly Without Creating a Nested Object in the...

I am using Formly in my project, where I have implemented three tabs. The selectedIndex of each tab is managed using [(selectedIndex)]. In the ngOnInit lifecycle hook, I use setTimeout to simulate an HTTP call that populates the form data:

ngOnInit() {
setTimeout(() => {
this.form.patchValue({
tabIndex: 2,
age: 40,
country: 'New York',
});
});
}


The issue arises when trying to bind the tabIndex to the current tab. If I define activeKey as follows:

type: 'tabs',
key: 'activeIndex',
fieldGroup: [...],


and bind the formControl object inside the formly-field-tabs component, the resulting form structure looks like this:

{
"activeIndex": {
"age": ...
}
}


This creates a nested object structure that I want to avoid.

How can I bind the tabIndex to the current tab without introducing such a nested object in the form structure?

Here is the relevant component code, along with a StackBlitz link for reference:
StackBlitz Example

Continue reading...