yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Applied custom mandatory validation message to existing core property editors that support the mandatory setting.

Browse Source
This commit is contained in:
Andy Butland
2019-06-27 15:10:27 +02:00
parent a90f0c4070
commit bb3d2cd948
11 changed files with 108 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Umbraco.Web.UI.Client/src/common/services/validationhelper.service.js Normal file
View File

@@ -0,0 +1,30 @@
(function () {
'use strict';
function validationHelperService($q, localizationService) {
// Gets the message to use for when a mandatory field isn't completed.
// Will either use the one provided on the property type's validation object
// or a localised default.
function getMandatoryMessage(validation) {
if (validation.mandatoryMessage) {
return $q.when(validation.mandatoryMessage);
} else {
return localizationService.localize("general_required").then(function (value) {
return $q.when(value);
});
}
}
var service = {
getMandatoryMessage: getMandatoryMessage
};
return service;
}
angular.module('umbraco.services').factory('validationHelper', validationHelperService);
})();

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/colorpicker/colorpicker.controller.js
View File

@@ -110,7 +110,7 @@ function ColorPickerController($scope) {
);
return {
isValid: isValid,
errorMsg: "Value cannot be empty",
errorMsg: $scope.model.validation.mandatoryMessage || "Value cannot be empty",
errorKey: "required"
};
}

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
View File

@@ -1,4 +1,4 @@
function dateTimePickerController($scope, notificationsService, assetsService, angularHelper, userService, $element, dateHelper) {
function dateTimePickerController($scope, angularHelper, dateHelper, validationHelper) {
let flatPickr = null;
@@ -56,6 +56,11 @@ function dateTimePickerController($scope, notificationsService, assetsService, a
setDatePickerVal();
// Set the message to use for when a mandatory field isn't completed.
// Will either use the one provided on the property type or a localised default.
validationHelper.getMandatoryMessage($scope.model.validation).then(function (value) {
$scope.mandatoryMessage = value;
});
}
$scope.clearDate = function() {

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
View File

@@ -32,7 +32,7 @@
</div>
<span ng-messages="datePickerForm.datepicker.$error" show-validation-on-submit >
<span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
<span class="help-inline" ng-message="required">{{mandatoryMessage}}</span>
<span class="help-inline" ng-message="valServer">{{datePickerForm.datepicker.errorMsg}}</span>
<span class="help-inline" ng-message="pickerError"><localize key="validation_invalidDate">Invalid date</localize></span>
</span>

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.controller.js
View File

@@ -1,5 +1,5 @@
angular.module("umbraco").controller("Umbraco.PropertyEditors.DropdownFlexibleController",
function($scope) {
function ($scope, validationHelper) {
//setup the default config
var config = {
@@ -89,4 +89,10 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.DropdownFlexibleCo
$scope.model.value = null;
}
}
// Set the message to use for when a mandatory field isn't completed.
// Will either use the one provided on the property type or a localised default.
validationHelper.getMandatoryMessage($scope.model.validation).then(function (value) {
$scope.mandatoryMessage = value;
});
});

42
src/Umbraco.Web.UI.Client/src/views/propertyeditors/dropdownFlexible/dropdownFlexible.html
View File

@@ -1,21 +1,29 @@
<div ng-controller="Umbraco.PropertyEditors.DropdownFlexibleController" ng-switch="model.config.multiple">
<select name="dropDownList"
class="umb-property-editor umb-dropdown"
ng-switch-default
ng-change="updateSingleDropdownValue()"
ng-model="model.singleDropdownValue"
ng-options="item.value as item.value for item in model.config.items"
ng-required="model.validation.mandatory">
<option></option>
</select>
<ng-form name="dropDownListForm">
<select name="dropDownList"
class="umb-property-editor umb-dropdown"
ng-switch-default
ng-change="updateSingleDropdownValue()"
ng-model="model.singleDropdownValue"
ng-options="item.value as item.value for item in model.config.items"
ng-required="model.validation.mandatory">
<option></option>
</select>
<!--NOTE: This ng-switch is required because ng-multiple doesn't actually support dynamic bindings with multi-select lists -->
<select name="dropDownList"
class="umb-property-editor umb-dropdown"
ng-switch-when="true"
multiple
ng-model="model.value"
ng-options="item.value as item.value for item in model.config.items"
ng-required="model.validation.mandatory"></select>
<!--NOTE: This ng-switch is required because ng-multiple doesn't actually support dynamic bindings with multi-select lists -->
<select name="dropDownList"
class="umb-property-editor umb-dropdown"
ng-switch-when="true"
multiple
ng-model="model.value"
ng-options="item.value as item.value for item in model.config.items"
ng-required="model.validation.mandatory"></select>
<span ng-messages="dropDownListForm.dropDownList.$error" show-validation-on-submit>
<span class="help-inline" ng-message="required">{{mandatoryMessage}}</span>
</span>
</ng-form>
</div>

10
src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.controller.js Normal file
View File

@@ -0,0 +1,10 @@
function emailController($scope, validationHelper) {
// Set the message to use for when a mandatory field isn't completed.
// Will either use the one provided on the property type or a localised default.
validationHelper.getMandatoryMessage($scope.model.validation).then(function(value) {
$scope.mandatoryMessage = value;
});
}
angular.module('umbraco').controller("Umbraco.PropertyEditors.EmailController", emailController);

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/email/email.html
View File

@@ -1,4 +1,4 @@
<div>
<div ng-controller="Umbraco.PropertyEditors.EmailController">
<ng-form name="emailFieldForm">
<input type="email" name="textbox"
ng-model="model.value"
@@ -9,7 +9,7 @@
val-server="value" />
<span ng-messages="emailFieldForm.textbox.$error" show-validation-on-submit >
<span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
<span class="help-inline" ng-message="required">{{mandatoryMessage}}</span>
<span class="help-inline" ng-message="valEmail"><localize key="validation_invalidEmail">Invalid email</localize></span>
<span class="help-inline" ng-message="valServer">{{emailFieldForm.textbox.errorMsg}}</span>
</span>

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.controller.js
View File

@@ -1,5 +1,5 @@
angular.module("umbraco").controller("Umbraco.PropertyEditors.RadioButtonsController",
function($scope) {
function ($scope, validationHelper) {
function init() {
@@ -19,6 +19,12 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.RadioButtonsContro
$scope.configItems = configItems;
}
// Set the message to use for when a mandatory field isn't completed.
// Will either use the one provided on the property type or a localised default.
validationHelper.getMandatoryMessage($scope.model.validation).then(function (value) {
$scope.mandatoryMessage = value;
});
}

18
src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
View File

@@ -1,7 +1,15 @@
<div class="umb-property-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
<ul class="unstyled">
<li ng-repeat="item in configItems track by item.id">
<umb-radiobutton name="{{model.alias}}" value="{{item.value}}" model="model.value" text="{{item.value}}" required="model.validation.mandatory && model.value == ''"></umb-radiobutton>
</li>
</ul>
<ng-form name="radioButtonsFieldForm">
<ul class="unstyled">
<li ng-repeat="item in configItems track by item.id">
<umb-radiobutton name="{{model.alias}}" value="{{item.value}}" model="model.value" text="{{item.value}}" required="model.validation.mandatory && model.value == ''"></umb-radiobutton>
</li>
</ul>
<span ng-messages="radioButtonsFieldForm[model.alias].$error" show-validation-on-submit>
<span class="help-inline" ng-message="required">{{mandatoryMessage}}</span>
</span>
</ng-form>
</div>

16
src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
View File

@@ -1,4 +1,4 @@
function textboxController($scope, localizationService) {
function textboxController($scope, validationHelper) {
// macro parameter editor doesn't contains a config object,
// so we create a new one to hold any properties
if (!$scope.model.config) {
@@ -19,14 +19,10 @@ function textboxController($scope, localizationService) {
}
$scope.model.change();
$scope.mandatoryMessage = "";
if ($scope.model.validation.mandatoryMessage) {
$scope.mandatoryMessage = $scope.model.validation.mandatoryMessage;
} else {
localizationService.localize("general_required").then(function (value) {
$scope.mandatoryMessage = value;
});
}
// Set the message to use for when a mandatory field isn't completed.
// Will either use the one provided on the property type or a localised default.
validationHelper.getMandatoryMessage($scope.model.validation).then(function(value) {
$scope.mandatoryMessage = value;
});
}
angular.module('umbraco').controller("Umbraco.PropertyEditors.textboxController", textboxController);