Search code examples
angularjswebix

Webix richselect keeps resetting (to former value) on form submit (submit button click)


I have a webix form integrated with AngularJS and I am getting challenge after challenge using this framework. So far I have stuck with it because I feel it is the most suitable option. I would be happy to post code if requested.

But I simply want to inquire how or why does my richselect (AngularJS based) keep going to original value (no page reload) on initial form submits. Also, on page reload (ater submit) my richselect assumes proper value.

How can I resolve this issue?

<div id="formcontainer"  ng-app="Risk" ng-controller="EditRiskController as ctrl">
    <get-risk></get-risk>
    <div ng-if="ctrl.initDone && ctrl.userDone" id="myeditform" layout-padding="" ng-cloak="">   
        <form id="form" name="EditRisk" role="form"
              ng-submit="ctrl.valid() && ctrl.submit()" novalidate>
             <div ng-show="ctrl.config.owner.done" config="owner"
                  webix-ui="owner" id="owner" width="200" height="30" 
                  name="owner" options="users" type="richselect" />
             <button id="submit" type="submit" class="raised primary">
               Edit Risk
             </button>
        </form>
    </div>
</div>

RichSelect Init Code

if (view == "richselect")
{
    config.value = scope.ctrl.risk[attr] || 0; 
    config.options = scope.ctrl[options];

    config.on =  {
        "onChange": function(){
            var obj = this.eventSource || this; 
            scope.ctrl.getItemValueAndValidate(obj, scope.ctrl, attr);
        }
    };
}

Get Item Value (without Validate) referenced in config init code

commonFunctions.getItemValue = function(obj, scope, type, field){
    if (!obj && !obj.getValue()){
         scope[type][field] = '';   
         return;
    }
    scope[type][field] = obj.value || obj.data.value;          
}

Solution

  • See code below, where adding config.value = obj.getValue(); completely resolved the issue.

                if (view == "richselect")
                {
                    config.value = scope.ctrl.risk[attr];
                    config.options = scope.ctrl[options];
    
                    config.on =  {
                        "onChange": function(){
                            var obj = this.eventSource || this; 
                            scope.ctrl.getItemValueAndValidate(obj, scope.ctrl, attr);
                            config.value = obj.getValue();   //adding this fixed the problem
                        }
                    }
                }