Please check the following image:

Right now we have this array of objects defined in the schema as follows:
`destinationCountry: {
type: Array,
label: () => {return TAPi18n.__('destinationCountry.label')},
minCount:1,
maxCount:5,
},
'destinationCountry.$': {
type: Object,
label:()=>{ return " "},
},
'destinationCountry.$.country':{
type:String,
autoform:{
type: "select2",
'data-placeholder': () => {return TAPi18n.__('destinationCountry.placeholder')},
options: () => {return TAPi18n.__('countryList', {returnObjectTrees:true, joinArrays:false})},
afFieldInput: {
multiple: false,
width: 'resolve',
},
afQuickField: {
'panelClass': 'col'
},
}
},
'destinationCountry.$.days':{
type:String,
autoform:{
type:"select",
options:function (){
// here is where the suggested code would go
},
}
},`
Now, is there any way to make it so that the options in days are reactive to the ones selected in the previous array index object for $.days? We would like so that if the maximum of days in all the $.days fields is 20, as soon as you select 13 in one of them, there will only be 7 available for all the other $.days select fields. How could we achieve this reactively?
update 1:
I tried the following:
'destinationCountry.$.days': {
type: String,
autoform: {
type: "select",
options: function () {
let arr = [...Array(days.get())].map((v, i) => i);
let finalArr = [{
label: "Connection Flight",
value: 0
}]
arr.map((v, i) => {
finalArr.push({
label: (v + 1).toString(),
value: i + 1
})
});
if (this.name == 'destinationCountry.0.days') {
var usedDays = 0;
var usedArr;
if (AutoForm.getFormValues('step2') == null) {
usedArr = []
console.log("usedArr", usedArr)
} else {
usedArr = AutoForm.getFormValues('step2').insertDoc.destinationCountry
console.log("usedArr", usedArr)
}
for (let index = 0; index < usedArr.length; index++) {
const element = Number(usedArr[index].days);
usedDays += element
}
console.log("finalArr", finalArr)
if (usedDays == 0) {
console.log('usedDays', usedDays)
return finalArr
} else if (usedDays > 0) {
newFinalArr = finalArr.slice(0, "-" + (usedDays));
return newFinalArr
}
}
if (this.name == 'destinationCountry.1.days') {
var usedDays = 0;
var usedArr;
if (AutoForm.getFormValues('step2') == null) {
usedArr = []
console.log("usedArr", usedArr)
} else {
usedArr = AutoForm.getFormValues('step2').insertDoc.destinationCountry
console.log("usedArr", usedArr)
}
for (let index = 0; index < usedArr.length; index++) {
const element = Number(usedArr[index].days);
usedDays += element
}
console.log("finalArr", finalArr)
if (usedDays == 0) {
console.log('usedDays', usedDays)
return finalArr
} else if (usedDays > 0) {
newFinalArr = finalArr.slice(0, "-" + (usedDays));
return newFinalArr
}
}
},
}
},
First days option array gets erased when adding the second array object...
Now every time you select an option in the first destinationCountry.0.days, the 1.days select gets correctly reduced depending on the number you select in the 0.days field. but it re-renders and removes the option selected in the first 0.days. is there any way to set and keep the value selected for the first 0.days field?