I want to implement infinite wheel scroller on my angular project.
How can I perform validation to disable the value of infinite wheel scroller. Can anyone give some implementation on infinite wheel validation to disable the value
this.scrollerOptions = {
showLabel: true,
display: 'inline',
wheels: [
[{
.....
},
{ // An infinite wheel
label: 'Label 4',
circular: false,
data: function (i) {
return {
value: i,
display: i.toString()
}
},
getIndex: function (value) {
return value;
}
}]
],
validate: (event, inst) => {
const disabledInfiniteWheelArray = [];
// TO-DO
// HOW to DO Validation based on some selection of other wheel
// I want to disable some entry of infinite wheel scroller
return {
disabled: [ [], disabledInfiniteWheelArray]
};
}
}
//https://docs.mobiscroll.com/angular/scroller#opt-wheels - to Create infinite wheel
In this example we have fixed data which is Bind to wheel. My requirement is “I Need validation for infinite wheel”
Code spinet copied from your example - Please refer my comment line 5
Validation (event, inst) => {
const values = event.values;
const disabledValues = [];
// HERE WE KNOW THE LENGTH OF WHEEL (toValues wheel) FOR VALIDATION
// BUT INCASE OF INFINTE WHEEL WE DONT KNOW THE WHEEL LENGTH
// [PLESE CHECKOUT MY CODE IN QUESTION ABOVE]
for (let i = 0; i < toValues.length; ++i) {
if (toValues[i].value <= values[0]) {
disabledValues.push(toValues[i].value);
}
}
return {
disabled: [
[], disabledValues
]
};
}
In the validate function, we always know what the selected value is. Only x values are displayed on the wheel at a time and can be validated with a cycle. In this example, the even numbers are disabled, to see how it works:
wheels: [
[{
circular: false,
data: fromValues,
label: 'From'
}, {
circular: false,
data: toValues,
label: 'To'
},
{ // An infinite wheel
label: 'Label 3',
circular: false,
data: function (i) {
return {
value: i,
display: i.toString()
};
},
getIndex: function (value) {
return value;
}
}
]
],
...
validate: function (event, inst) {
const infDisabled = [];
const values = event.values;
const infValue = values[2];
for (let i = infValue - 10; i < infValue + 10; ++i) {
if (i % 2 === 0) { // test condition
infDisabled.push(i);
}
}
return {
disabled: [
[],
[], infDisabled // 3 wheels used
]
};
}