feat(checkbox): add required attribute (#73)

Author: neolitec

packages/oui-checkbox/README.md

@@ -26,6 +26,7 @@
 | name          | string                  | @?      | `true`           |                          |         | name attribute of the checkbox
 | disabled      | boolean                 | <?      |                  |                          | false   | disabled flag
 | model         | nullable&lt;boolean&gt; | =?      |                  | `true`, `false`, `null`  |         | current value of the checkbox and null is considered as `indeterminate`
+| required      | boolean                 | <?      |                  |                          | false   | `true` if the checkbox should be checked
 | on-change     | function                | &?      |                  |                          |         | handler triggered when value has changed
 
 ## Examples
@@ -55,6 +56,17 @@
 </div>
 ```
 
+### Validation
+
+```html:preview
+<form name="form">
+  <div ng-init="$ctrl.agreements = false">
+    <oui-checkbox text="Agreements" model="$ctrl.agreements" name="agreements" required></oui-checkbox>
+  </div>
+  Is this form valid? : {{ form.$valid ? "yes" : "no" }}
+</form>
+```
+
 ### Description
 
 ```html:preview

packages/oui-checkbox/src/checkbox.component.js

@@ -11,6 +11,7 @@ export default {
         name: "@?",
         model: "=?",
         onChange: "&?",
-        disabled: "<?"
+        disabled: "<?",
+        required: "<?"
     }
 };

packages/oui-checkbox/src/checkbox.controller.js

@@ -1,3 +1,5 @@
+import { addBooleanParameter } from "@oui-angular/common/component-utils";
+
 export default class {
     constructor ($scope, $element, $attrs, $timeout) {
         "ngInject";
@@ -28,9 +30,8 @@ export default class {
     }
 
     $onInit () {
-        if (angular.isDefined(this.$attrs.disabled) && this.$attrs.disabled === "") {
-            this.disabled = true;
-        }
+        addBooleanParameter(this, "disabled");
+        addBooleanParameter(this, "required");
 
         if (!self.id) {
             this.id = `oui-checkbox-${this.$scope.$id}`;

packages/oui-checkbox/src/checkbox.html

@@ -7,7 +7,8 @@
          ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
          ng-model="$ctrl.model"
          ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
-         ng-disabled="$ctrl.disabled">
+         ng-disabled="$ctrl.disabled"
+         ng-required="$ctrl.required">
   <label for="{{:: $ctrl.id }}"
          class="oui-checkbox__label-container"
          ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"

packages/oui-checkbox/src/index.spec.js

@@ -194,5 +194,55 @@ describe("ouiCheckbox", () => {
                 expect(onChangeSpy).toHaveBeenCalledWith(true);
             });
         });
+
+        describe("Validation", () => {
+            it("should apply a required validation with the required attribute without value", () => {
+                const element = TestUtils.compileTemplate("<oui-checkbox required></oui-checkbox>");
+
+                const checkboxElement = getCheckboxInputElement(element);
+                expect(angular.element(checkboxElement).prop("required")).toBe(true);
+            });
+
+            it("should apply a required validation with the required attribute when true", () => {
+                const element = TestUtils.compileTemplate(`
+                        <oui-checkbox required="$ctrl.isRequired"></oui-checkbox>
+                    `, {
+                        isRequired: true
+                    });
+
+                const checkboxElement = getCheckboxInputElement(element);
+                expect(angular.element(checkboxElement).prop("required")).toBe(true);
+            });
+
+            it("should apply a required validation with the required attribute when true", () => {
+                const element = TestUtils.compileTemplate(`
+                        <oui-checkbox required="$ctrl.isRequired"></oui-checkbox>
+                    `, {
+                        isRequired: false
+                    });
+
+                const checkboxElement = getCheckboxInputElement(element);
+                expect(angular.element(checkboxElement).prop("required")).toBe(false);
+            });
+
+            it("should be done if required attribute is defined", () => {
+                const element = TestUtils.compileTemplate(`<form name="form">
+                        <oui-checkbox name="checkbox" required="$ctrl.isRequired"></oui-checkbox>
+                    </form>
+                    `, {
+                        isRequired: true
+                    });
+
+                const form = element.scope().form;
+                const checkboxElement = getCheckboxInputElement(element);
+                const $checkboxElement = angular.element(checkboxElement);
+
+                expect(form.$valid).toBeFalsy();
+
+                $checkboxElement.prop("checked", true);
+                $checkboxElement.triggerHandler("click");
+                expect(form.$valid).toBeTruthy();
+            });
+        });
     });
 });