Checkboxlist and radiobuttonlist validation (#8833)

(cherry picked from commit 4782560f2f)

src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.controller.js

@@ -1,5 +1,5 @@
 angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListController",
-    function ($scope) {
+    function ($scope, validationMessageService) {
         
         var vm = this;
         
@@ -8,6 +8,8 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
         vm.change = change;
         
         function init() {
+
+            vm.uniqueId = String.CreateGuid();
             
             // currently the property editor will onyl work if our input is an object.
             if (Utilities.isObject($scope.model.config.items)) {
@@ -35,6 +37,12 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
                 //watch the model.value in case it changes so that we can keep our view model in sync
                 $scope.$watchCollection("model.value", updateViewModel);
             }
+
+            // 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.
+            validationMessageService.getMandatoryMessage($scope.model.validation).then(function (value) {
+                $scope.mandatoryMessage = value;
+            });  
             
         }
         

src/Umbraco.Web.UI.Client/src/views/propertyeditors/checkboxlist/checkboxlist.html

@@ -1,7 +1,16 @@
 <div class="umb-property-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController as vm">
-    <ul class="unstyled">
-        <li ng-repeat="item in vm.viewItems track by item.key">
-            <umb-checkbox name="{{::model.alias}}" value="{{::item.value}}" model="item.checked" text="{{::item.value}}" on-change="vm.change(model, value)" required="model.validation.mandatory && !model.value.length"></umb-checkbox>
-        </li>
-    </ul>
+
+    <ng-form name="checkboxListFieldForm">
+
+        <ul class="unstyled">
+            <li ng-repeat="item in vm.viewItems track by item.key">
+                <umb-checkbox name="{{::model.alias}}_{{::vm.uniqueId}}" value="{{::item.value}}" model="item.checked" text="{{::item.value}}" on-change="vm.change(model, value)" required="model.validation.mandatory && !model.value.length"></umb-checkbox>
+            </li>
+        </ul>
+
+        <div ng-messages="checkboxListFieldForm[model.alias + '_' + vm.uniqueId].$error" show-validation-on-submit>
+            <p class="help-inline" ng-message="required">{{mandatoryMessage}}</p>
+        </div>
+
+    </ng-form>
 </div>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html

@@ -12,7 +12,7 @@
             </li>
         </ul>
 
-        <div ng-messages="radioButtonsFieldForm[model.alias_vm.uniqueId].$error" show-validation-on-submit>
+        <div ng-messages="radioButtonsFieldForm[model.alias + '_' + vm.uniqueId].$error" show-validation-on-submit>
             <p class="help-inline" ng-message="required">{{mandatoryMessage}}</p>
         </div>