Form is initially still dirty

[westor21]

starting in Line 119 you set the elements model controller to pristine, if we initially set options:

         scope.$watch(watch, function (newVal, oldVal, scope) {
           if (angular.equals(newVal, oldVal)) {
             return;
           }
           // Delayed so that the options have time to be rendered
           $timeout(function () {
             elm.select2('val', controller.$viewValue);
             // Refresh angular to remove the superfluous option
             elm.trigger('change');
             if(newVal && !oldVal && controller.$setPristine) {
               controller.$setPristine(true);
             }
           });
         });

Unfortunatly the change event also sets the outer form to dirty. Resetting the element is not enough.

I havn't made tests, but it should work well, if you return the watcher like so:

         scope.$watch(watch, function (newVal, oldVal, scope) {
            // never set dirty if we initially set options
            if (oldVal === undefined) {
              return;
            }
            ...

Best regards westor21

[NMichas]

This "almost" works but I experience a weird behavior: The first option, of my first select on the form seems to have its value nullified after this patch is applied. The remaining selects (as well as the remaining options of the first select) seem to have their values properly assigned.

[westor21]

I updated to the newest version of ui-select2 (which unfortunatly is not presented with an incremented number in bower.json) and a new version of select2. (v.3.5.1)

We still had the problem of an initially dirty form, therefore I patched our version like this:

Index: claims-webapp/bower_components/angular-ui-select2/src/select2.js
IDEA additional info:
  Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
    <+>UTF-8
    ===================================================================
    --- claims-webapp/bower_components/angular-ui-select2/src/select2.js    (revision 5770:2cc61de623f0577e7fb5239572195f98ace80548)
+++ claims-webapp/bower_components/angular-ui-select2/src/select2.js    (revision )
@@ -212,12 +212,50 @@

  // Initialize the plugin late so that the injected DOM does not disrupt the template compiler
  $timeout(function () {
    +
      +          // prohibit publishing of dirty state to parent form
        +          var formController = elm.parent().controller('form');
    +          var _elmCtrl, _formCtrl;
    +          if (formController) {
      +            _elmCtrl = elm.controller('ngModel');
      +
        +            formController.$removeControl(_elmCtrl);
      +
        +            _formCtrl = {
        +              $addControl: formController.$addControl,
        +              $removeControl: formController.$removeControl,
        +              $setValidity: formController.$setValidity,
        +              $setDirty: formController.$setDirty,
        +              $setPristine: formController.$setPristine
      +            };
    +
      +            // replace form controller with a "null-controller"
        +            var nullFormCtrl = {
      +              $addControl: angular.noop,
      +              $removeControl: angular.noop,
      +              $setValidity: angular.noop,
      +              $setDirty: angular.noop,
      +              $setPristine: angular.noop
    +            };
+
  +            angular.extend(formController, nullFormCtrl);
+
  +          }
+
  elm.select2(opts);

// Set initial value - I'm not sure about this but it seems to need to be there
elm.select2('data', controller.$modelValue);
// important!
controller.$render();
+
  +          // restore formController functionality
    +          if(_formCtrl && _elmCtrl) {
  +            angular.extend(formController, _formCtrl);
  +            _elmCtrl.$setPristine();
  +            formController.$addControl(_elmCtrl);
  +          }
+

// Not sure if I should just check for !isSelect OR if I should check for 'tags' key
if (!opts.initSelection && !isSelect) {