Equivalent of updateOn : blur

[danbouckley]

Hi!

I wonder if it would be possible to implement something that emulates ng-model-options="{ updateOn : 'blur' }" - specifically in relation to the 'close' button behaviour.

I have this selector implemented with required validation, and styles to show when there is an error. The side affect of this, is that there is error styling after clicking the 'close' button as it clears my selection, and therefore becomes invalid. It would be good, that if while the dropdown was open, the angular validation classes would not be updated - or at least have the option to have this functionality if required.

I had a brief look through the code and was hoping we could add some ng-model-options, but it seems the close button behaves quite differently.

I hope this makes sense!

[indrimuska]

Hi @danbouckley, sure this make sense!

I think you can try to use the model controller properties like $pristine/$dirty or $valid/$invalid to achieve that goal.

select.ng-valid + label { border-color: green; }
select.ng-invalid + label { border-color: red; }

---

Please, try this configuration and let me know if it fits your needs:

p.active { background: yellow; }

<form name="myForm">
  <p ng-class="{ active: myForm.mySelect.$pristine }"> $pristine</p>
  <p ng-class="{ active: myForm.mySelect.$dirty    }"> $dirty</p>
  <p ng-class="{ active: myForm.mySelect.$touched  }"> $touched</p>
  <p ng-class="{ active: myForm.mySelect.$valid    }"> $valid</p>
  <p ng-class="{ active: myForm.mySelect.$invalid  }"> $invalid</p>

  <select selector
    name="mySelect"
    require="true"
    model="browser"
    options="browsers"
    value-attr="value"
    placeholder="Choose your favourite browser..."></select>
</form>

$scope.browsers = [
    { value: "GC", label: "Chrome" },
    { value: "FF", label: "Firefox" },
    { value: "AS", label: "Safari" },
    { value: "IE", label: "Internet Explorer" }
];

[danbouckley]

I've implemented your configuration as a Plunker: http://plnkr.co/edit/YL7IZ6uQtSeQBEGQRkly?p=preview

You can see what i'm talking about when selecting an item, and then removing that item from the selector (via the close button) - unfortunately the selector is red. I would like the error styling to appear after leaving the selector blank, not when selecting an item, which emulates the updateOn : blur functionality.

I feel the user hasn't actually made a mistake here, they are just clearing the item, in order to select a new one.

[indrimuska]

Well, to have such a behavior, we need to implement two model properties inside the directive, $viewValue and $modelValue. Since there's only one property in the directive's scope, called $scope.value, those are synced, they have the same value every time.

There's needed a little time I don't have at the moment to pack a solution, but if you want to propose a PR I'll be glad to review it for you! :)