Trouble with validity using default values.

[isaac-livingston]

Having a bit of trouble when the following conditions are present:

1. Have a pre-filled object; for example, if one were to make an 'Edit' form
2. Push the default object into the select list.
3. Set the ng-model field to the ID of the default object.

<!-- the mark-up -->
<selectize ng-model="base.serialnumber[data.linkfield]" 
                   name="{{data.linkfield}}" 
                   config="inputConfig"  
                   options="cfg.sOpts"
                   ng-pattern="cfg.rx" 
                   ng-required="cfg.required"></selectize>

/*  the configuration */
scope.inputConfig = {
                create: true,
                valueField: attribs.valuefield,
                labelField: attribs.labelfield,
                searchField: attribs.searchfield,
                placeholder: attribs.placeholder,
                inputClass: 'form-control selectize-input',
                onInitialize: function (selectize) {
                    // receives the selectize object as an argument
                    selobj = selectize;
                },
                maxItems: 1,
                load: debounce(function (query, callback) {
                    if (!query.length) return callback();
                    if (query.length < attribs.minlen) return callback();
                    this.clearOptions();
                    scope.cfg.queryFunction(query);
                }, 400, true)
            };

/* a bit of json as an example */

{
    "Employee":
        {"Id":4,"Name":"EMPLOYEE NAME"},
    "Id":20088,
    "SerialNumber":"123456",
    "DateOfOrigination":"2015-12-12",
    "EmployeeId":4
}

At this point things look great. The options include the item that is required and the control shows the appropriate text.

The trouble sets in when adding ng-required='true'. Even though the control has been pre-populated, it will be in-valid until the user removes the pre-populated item and chooses the default option from the options list.

[isaac-livingston]

Here is what I did to fix for now...

var setSelectizeValue = function() {
      validate();

        selectize.$control.toggleClass('ng-valid', modelCtrl.$valid);
        selectize.$control.toggleClass('ng-invalid', modelCtrl.$invalid);
        selectize.$control.toggleClass('ng-dirty', modelCtrl.$dirty);
        selectize.$control.toggleClass('ng-pristine', modelCtrl.$pristine);

        if (!angular.equals(selectize.items, scope.ngModel)) {
            selectize.setValue(scope.ngModel, true);
            /* added the following line */
            if (!!scope.ngModel) { modelCtrl.$setValidity('required', true); };
        }


      }

[arturgspb]

#116