Knockout Typescript bind action of dxValidator.validationRules.validationCallback for multiple values

Question

I have 3 dxNumberBox max,min and average and a next button as :

<div class="flex-row">
                <div class="flex-item-left">
                    <div data-bind="dxNumberBox:{value : kyc.Generic.MinimumAmountOfCreditTransaction , min:0,max:999999,format:',##0',label:'מהו הסכום המינימלי לעסקה?'},
                         dxValidator: { validationRules: [
                         { type: 'required', message: 'שדה חובה', trim: true }, 
                         { type: 'custom', message: 'הסכום המינימלי חייב להיות קטן או שווה לסכום הממוצע',validationCallback : MinimumAmountOfCreditTransactionValidation }
                         ] }"></div>
                </div>
                <div class="flex-item-right">
                    <div data-bind="dxNumberBox:{value : kyc.Generic.MaximumAmountOfCreditTransaction , min:0,max:999999,format:',##0' ,label:'מהו הסכום המקסימלי לעסקה?'},
                         dxValidator: { validationRules: [
                         { type: 'required', message: 'שדה חובה', trim: true }, 
                         { type: 'custom', message: 'הסכום המקסימלי חייב להיות גדול או שווה לסכום הממוצע',validationCallback : MaximumAmountOfCreditTransactionValidation }
                         ] }"></div>
                </div>
            </div>

            <div class="flex-row">
                <div class="flex-item-Full">
                    <div data-bind="dxNumberBox:{value : kyc.Generic.AvarageTransactionAmountInCreditCard , min:0,max:999999,format:',##0',label:'מהו הסכום הממוצע לעסקה?'},
                         dxValidator: { validationRules: [
                         { type: 'required', message: 'שדה חובה', trim: true }, 
                         { type: 'custom', message: 'הסכום הממוצע חייב להיות גדול או שווה לסכום המינימלי וקטן או שווה לסכום המקסימלי',validationCallback : AvarageTransactionAmountInCreditCardValidation }
                         ]}"></div>
                </div>
            </div>


        </div>
        <div class="flex-row">
            <div class="flex-item-left">
                <div style="float:left" data-bind="dxButton: NextButtonOptions"></div>
            </div>
        </div>

my dxNumberBox excecute the validation on change:

MinimumAmountOfCreditTransactionValidation = (e) => {
    var MinimumAmountOfCreditTransaction = this.kyc.Generic.MinimumAmountOfCreditTransaction();
    var AvarageTransactionAmountInCreditCard = this.kyc.Generic.AvarageTransactionAmountInCreditCard();
    var res = MinimumAmountOfCreditTransaction <= AvarageTransactionAmountInCreditCard;
    console.log(res);
    return res;
}

MaximumAmountOfCreditTransactionValidation = (e) => {
    var MaximumAmountOfCreditTransaction = this.kyc.Generic.MaximumAmountOfCreditTransaction();
    var AvarageTransactionAmountInCreditCard = this.kyc.Generic.AvarageTransactionAmountInCreditCard();
    var res = AvarageTransactionAmountInCreditCard <= MaximumAmountOfCreditTransaction;
    return res;
}

AvarageTransactionAmountInCreditCardValidation = (e) => {
    var MinimumAmountOfCreditTransaction = this.kyc.Generic.MinimumAmountOfCreditTransaction();
    var MaximumAmountOfCreditTransaction = this.kyc.Generic.MaximumAmountOfCreditTransaction();
    var AvarageTransactionAmountInCreditCard = this.kyc.Generic.AvarageTransactionAmountInCreditCard();
    var res = AvarageTransactionAmountInCreditCard <= MaximumAmountOfCreditTransaction &&
        MinimumAmountOfCreditTransaction <= AvarageTransactionAmountInCreditCard;
    return res;
}

and my next button do :

DoNext = (e) => {
    var result = e.validationGroup.validate();
    console.log("55555555555555555555555");
    console.log(e);
    console.log(result);
    if (result.status === "pending") {
        result.complete.then((r) => {
            if (r.isValid) {
            } else {
                DevExpress.ui.notify("יש שגיאות במילוי הטופס", "error", 5000);
            }
        });

    } else {
        if (result.isValid) {
        } else {
            DevExpress.ui.notify("יש שגיאות במילוי הטופס", "error", 5000);
        }
    }
}

The propblem is that all this 3 props

kyc.Generic.MinimumAmountOfCreditTransaction
kyc.Generic.MaximumAmountOfCreditTransaction
kyc.Generic.AvarageTransactionAmountInCreditCard

are all dependent one each other I mean when I set values for example :

kyc.Generic.MinimumAmountOfCreditTransaction = 10
kyc.Generic.MaximumAmountOfCreditTransaction = 1
kyc.Generic.AvarageTransactionAmountInCreditCard = 5

I got error for all of them but when I change the value of

kyc.Generic.MaximumAmountOfCreditTransaction = 30
kyc.Generic.AvarageTransactionAmountInCreditCard = 20

and click the next button I still get error for

  <div data-bind="dxNumberBox:{value : kyc.Generic.MinimumAmountOfCreditTransaction , min:0,max:999999,format:',##0',label:'מהו הסכום המינימלי לעסקה?'},
                         dxValidator: { validationRules: [
                         { type: 'required', message: 'שדה חובה', trim: true }, 
                         { type: 'custom', message: 'הסכום המינימלי חייב להיות קטן או שווה לסכום הממוצע',validationCallback : MinimumAmountOfCreditTransactionValidation }
                         ] }"></div>

Even that the MinimumAmountOfCreditTransactionValidation should return true, by logs I just saw that this validator is not run becouse the value value : kyc.Generic.MinimumAmountOfCreditTransaction did not change how do I run all this 3 validators actions : AvarageTransactionAmountInCreditCardValidation, MaximumAmountOfCreditTransactionValidation, MinimumAmountOfCreditTransactionValidation for any change of any of this 3 properties :

kyc.Generic.MinimumAmountOfCreditTransaction
kyc.Generic.MaximumAmountOfCreditTransaction
kyc.Generic.AvarageTransactionAmountInCreditCard

picture for the start :

picture after change for

kyc.Generic.MaximumAmountOfCreditTransaction
kyc.Generic.AvarageTransactionAmountInCreditCard

thanks