(js) Expose model validity in sg-toggle-grid
This commit is contained in:
parent
0fa8cbf9cb
commit
4002650748
|
@ -15,25 +15,29 @@
|
||||||
ng-model="editor.event.repeat.days"
|
ng-model="editor.event.repeat.days"
|
||||||
sg-toggle-grid sg-toggle-grid-attr="day">..</md-grid-list>
|
sg-toggle-grid sg-toggle-grid-attr="day">..</md-grid-list>
|
||||||
*/
|
*/
|
||||||
sgToggleGrid.$inject = ['$parse', '$mdUtil'];
|
sgToggleGrid.$inject = ['$parse', '$mdUtil', '$mdColors'];
|
||||||
function sgToggleGrid($parse, $mdUtil) {
|
function sgToggleGrid($parse, $mdUtil, $mdColors) {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
require: '?ngModel',
|
require: ['mdGridList', '?ngModel'],
|
||||||
compile: compile
|
compile: compile
|
||||||
};
|
};
|
||||||
|
|
||||||
function compile(tElement, tAttrs) {
|
function compile(tElement, tAttrs) {
|
||||||
return function postLink(scope, element, attr, ngModelCtrl) {
|
return function postLink(scope, element, attr, controllers) {
|
||||||
var tiles = tElement.find('md-grid-tile'),
|
var tiles = tElement.find('md-grid-tile'),
|
||||||
tile,
|
tile,
|
||||||
|
ngModelCtrl,
|
||||||
i,
|
i,
|
||||||
modelDays,
|
modelDays,
|
||||||
modelAttr,
|
modelAttr,
|
||||||
toggleClass;
|
toggleClass;
|
||||||
|
|
||||||
ngModelCtrl = ngModelCtrl || $mdUtil.fakeNgModel();
|
ngModelCtrl = controllers[1] || $mdUtil.fakeNgModel();
|
||||||
ngModelCtrl.$render = render;
|
ngModelCtrl.$render = render;
|
||||||
|
ngModelCtrl.$isEmpty = function(value) {
|
||||||
|
return !value || value.length === 0;
|
||||||
|
};
|
||||||
|
|
||||||
toggleClass = function() {
|
toggleClass = function() {
|
||||||
// Toggle class on click event and call toggle function
|
// Toggle class on click event and call toggle function
|
||||||
|
@ -63,6 +67,24 @@
|
||||||
tile.addClass('sg-active');
|
tile.addClass('sg-active');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
ngModelCtrl.$validate();
|
||||||
|
setInvalid(ngModelCtrl.$invalid);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setInvalid(invalid) {
|
||||||
|
var label = element.parent().children()[0];
|
||||||
|
if (invalid) {
|
||||||
|
element.addClass('sg-toggle-grid-invalid');
|
||||||
|
if (label.tagName == 'LABEL') {
|
||||||
|
label.style.color = $mdColors.getThemeColor('warn');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element.removeClass('sg-toggle-grid-invalid');
|
||||||
|
if (label.tagName == 'LABEL') {
|
||||||
|
label.style.color = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle(day) {
|
function toggle(day) {
|
||||||
|
@ -87,6 +109,8 @@
|
||||||
scope.$apply(function() {
|
scope.$apply(function() {
|
||||||
ngModelCtrl.$setViewValue(modelDays);
|
ngModelCtrl.$setViewValue(modelDays);
|
||||||
ngModelCtrl.$setDirty();
|
ngModelCtrl.$setDirty();
|
||||||
|
ngModelCtrl.$validate();
|
||||||
|
setInvalid(ngModelCtrl.$invalid);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue