diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 37db15b87..8dd1b83a8 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -1196,7 +1196,7 @@
diff --git a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
index 5cac49d5e..41980e585 100644
--- a/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
+++ b/UI/WebServerResources/js/Common/sgToggleGrid.directive.js
@@ -27,6 +27,7 @@
var CLASS_ACTIVE = 'md-default-theme md-accent md-bg md-bdr';
return function postLink(scope, element, attr, controllers) {
var tiles = tElement.find('md-grid-tile'),
+ label = tElement.parent().children()[0],
tile,
ngModelCtrl,
i,
@@ -40,6 +41,15 @@
return !value || value.length === 0;
};
+ scope.$watch(function() {
+ return ngModelCtrl.$invalid;
+ }, setInvalid);
+
+ tAttrs.$observe('required', function(value) {
+ angular.element(label).toggleClass('md-required', !!value);
+ ngModelCtrl.$validate();
+ });
+
toggleClass = function() {
// Toggle class on click event and call toggle function
var tile = angular.element(this),
@@ -69,11 +79,10 @@
}
});
ngModelCtrl.$validate();
- setInvalid(ngModelCtrl.$invalid);
}
- function setInvalid(invalid) {
- var label = element.parent().children()[0];
+ function setInvalid() {
+ var invalid = ngModelCtrl.$invalid;
if (invalid) {
element.addClass('sg-toggle-grid-invalid');
if (label.tagName == 'LABEL') {
@@ -111,7 +120,6 @@
ngModelCtrl.$setViewValue(modelDays);
ngModelCtrl.$setDirty();
ngModelCtrl.$validate();
- setInvalid(ngModelCtrl.$invalid);
});
}
};