Front-end mandatory-validation for radiolist and checkbox list.

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js

@@ -43,7 +43,8 @@
                 value: "@",
                 name: "@",
                 text: "@",
-                onChange: "="
+                required: "=",
+                onChange: "&"
             }
         };
 

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js

@@ -41,7 +41,8 @@
                 model: "=",
                 value: "@",
                 name: "@",
-                text: "@"
+                text: "@",
+                required: "="
             }
         };
 

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html

@@ -3,7 +3,7 @@
            value="{{value}}"
            ng-model="model.checked"
            class="umb-form-check__input"
-           ng-required="model.validation.mandatory && !model.value.length"
+           ng-required="required"
            ng-change="onChange(model)"/>
 
     <div class="umb-form-check__state umb-form-check__state" aria-hidden="true">

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html

@@ -2,7 +2,8 @@
     <input type="radio" name="{{name}}"
         value="{{value}}"
         ng-model="model"
-        class="umb-form-check__input" />
+        class="umb-form-check__input"
+        ng-required="required" />
 
     <div class="umb-form-check__state umb-form-check__state" aria-hidden="true">
         <div class="umb-form-check__check"></div>

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

@@ -71,15 +71,15 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.CheckboxListContro
             var index = _.findIndex($scope.model.value,
                 function (v) {
                     return v === item.val;
-                });
+                }
+            );
             
             if (item.checked) {
                 //if it doesn't exist in the model, then add it
                 if (index < 0) {
                     $scope.model.value.push(item.val);
                 }
-            }
-            else {
+            } else {
                 //if it exists in the model, then remove it
                 if (index >= 0) {
                     $scope.model.value.splice(index, 1);

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

@@ -1,9 +1,7 @@
 <div class="umb-property-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
-
     <ul class="unstyled">
         <li ng-repeat="item in selectedItems track by item.key">
-            <umb-checkbox name="{{model.alias}}" value="{{item.key}}" model="item" text="{{item.val}}" on-change="changed(item)"></umb-checkbox>
+            <umb-checkbox name="{{model.alias}}" value="{{item.key}}" model="item" text="{{item.val}}" on-change="changed(item)" required="model.validation.mandatory && !model.value.length"></umb-checkbox>
         </li>
     </ul>
-
 </div>

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

@@ -1,7 +1,7 @@
 <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.id}}" model="model.value" text="{{item.value}}"></umb-radiobutton>
+            <umb-radiobutton name="{{model.alias}}" value="{{item.id}}" model="model.value" text="{{item.value}}" required="model.validation.mandatory && model.value == ''"></umb-radiobutton>
         </li>
     </ul>
 </div>