v8: umbCheckbox and umbRadiobutton fixes (#6302)

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

@@ -22,14 +22,14 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
-@param {string} input-id Set the <code>id</code> of the checkbox.
+@param {string} inputId Set the <code>id</code> of the checkbox.
 @param {string} value Set the value of the checkbox.
 @param {string} name Set the name of the checkbox.
 @param {string} text Set the text for the checkbox label.
-@param {string} server-validation-field Set the <code>val-server-field</code> of the checkbox.
+@param {string} serverValidationField Set the <code>val-server-field</code> of the checkbox.
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
-@param {string} on-change Callback when the value of the checkbox changed by interaction.
+@param {callback} onChange Callback when the value of the checkbox change by interaction.
 
 **/
 
@@ -40,8 +40,8 @@
     function UmbCheckboxController($timeout) {
         
         var vm = this;
-        
-        vm.callOnChange = function() {
+
+        if (vm.onChange) {
             $timeout(function() {
                 vm.onChange({model:vm.model, value:vm.value});
             }, 0);
@@ -49,7 +49,6 @@
         
     }
     
-    
     var component = {
         templateUrl: 'views/components/forms/umb-checkbox.html',
         controller: UmbCheckboxController,
@@ -63,7 +62,7 @@
             serverValidationField: "@",
             disabled: "<",
             required: "<",
-            onChange: "&"
+            onChange: "&?"
         }
     };
 

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

@@ -27,31 +27,40 @@
 @param {string} text Set the text for the radiobutton label.
 @param {boolean} disabled Set the radiobutton to be disabled.
 @param {boolean} required Set the radiobutton to be required.
+@param {callback} onChange Callback when the value of the radiobutton change by interaction.
 
 **/
 
 (function () {
     'use strict';
 
-    function RadiobuttonDirective() {
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            templateUrl: 'views/components/forms/umb-radiobutton.html',
-            scope: {
-                model: "=",
-                value: "@",
-                name: "@",
-                text: "@",
-                disabled: "=",
-                required: "="
-            }
-        };
+    function UmbRadiobuttonController($timeout) {
 
-        return directive;
+        var vm = this;
 
+        if (vm.onChange) {
+            $timeout(function () {
+                vm.onChange({ model: vm.model, value: vm.value });
+            }, 0);
+        }
+        
     }
 
-    angular.module('umbraco.directives').directive('umbRadiobutton', RadiobuttonDirective);
+    var component = {
+        templateUrl: 'views/components/forms/umb-radiobutton.html',
+        controller: UmbRadiobuttonController,
+        controllerAs: 'vm',
+        bindings: {
+            model: "=",
+            value: "@",
+            name: "@",
+            text: "@",
+            disabled: "=",
+            required: "=",
+            onChange: "&?"
+        }
+    };
+
+    angular.module('umbraco.directives').component('umbRadiobutton', component);
 
 })();

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

@@ -1,4 +1,4 @@
-<label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': disabled }">
+<label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <input type="checkbox"
            id="{{vm.inputId}}"
            name="{{vm.name}}"
@@ -8,7 +8,7 @@
            ng-model="vm.model"
            ng-disabled="vm.disabled"
            ng-required="vm.required"
-           ng-change="vm.callOnChange()"/>
+           ng-change="vm.onChange()"/>
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check">

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

@@ -1,13 +1,14 @@
-<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': disabled }">
-    <input type="radio" name="{{name}}"
-        value="{{value}}"
+<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
+    <input type="radio" name="{{vm.name}}"
+        value="{{vm.value}}"
         class="umb-form-check__input"
-        ng-model="model"
-        ng-disabled="disabled"
-        ng-required="required" />
+        ng-model="vm.model"
+        ng-disabled="vm.disabled"
+        ng-required="vm.required"
+        ng-change="vm.onChange()" />
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check"></span>
     </span>
-    <span class="umb-form-check__text">{{text}}</span>
+    <span class="umb-form-check__text">{{vm.text}}</span>
 </label>