checkboxlist validation

Author: Null McNull

.idea/jsLibraryMappings.xml

@@ -151,7 +151,10 @@ fg.config(function (fgConfigProvider, FgField) {
     unique: 'The value "{{ field.state.$viewValue }}" is already in use.',
     number: 'The value "{{ field.state.$viewValue }}" is not a number.',
     min: 'The value {{ field.schema && ("should be at least " + field.schema.validation.min) || field.state.$viewValue + " is too low" }}',
-    max: 'The value {{ field.schema && ("should be less than " + field.schema.validation.max) || field.state.$viewValue + " is too high" }}'
+    max: 'The value {{ field.schema && ("should be less than " + field.schema.validation.max) || field.state.$viewValue + " is too high" }}',
+    requiredOption: 'Please select an option.',
+    minoptions: 'At least {{ field.schema.validation.minoptions }} option(s) should be selected.',
+    maxoptions: 'No more than {{ field.schema.validation.maxoptions }} option(s) should be selected.'
   });
 
   // - - - - - - - - - - - - - - - - - - - - - -

.idea/runConfigurations/gulpfile_js.xml

@@ -34,7 +34,7 @@
       </button>
     </div>
   </div>
-  <div ng-form fg-form-required-filter>
+  <div ng-form fg-null-form>
     <div fg-field="field"
          fg-tab-index="-1"
          fg-edit-mode="true"

src/angular-form-gen/angular-form-gen-templates.js

@@ -1,11 +1,11 @@
-<div class="checkbox" ng-repeat="option in field.schema.options" ng-model="form.data[field.schema.name]"
-     fg-required-checkboxlist>
-  <label title="{{ field.schema.tooltip }}">
-    <input fg-field-input
-           type="checkbox"
-           tabindex="{{ tabIndex }}"
-           name="{{ field.schema.name }}[]" value="{{ option.value }}"
-           ng-model="form.data[field.schema.name][option.value]">
-    <span>{{option.text || option.value}}</span>
-  </label>
-</div>
+<div fg-checkboxlist fg-field-input ng-model="form.data[field.schema.name]" name="{{ field.schema.name }}">
+  <div class="checkbox" ng-repeat="option in field.schema.options">
+    <label title="{{ field.schema.tooltip }}">
+      <input type="checkbox"
+             tabindex="{{ tabIndex }}"
+             value="{{ option.value }}"
+             ng-model="form.data[field.schema.name][option.value]">
+      <span>{{option.text || option.value}}</span>
+    </label>
+  </div>
+</div>

src/angular-form-gen/angular-form-gen.js

@@ -6,4 +6,40 @@
 </div>
 <div fg-tabs-pane="Validation">
   <div fg-property-field-validation="{ required: true }"></div>
+
+  <div class="fg-property-field-validation">
+    <div fg-property-field="minoptions"
+         fg-property-field-label="Minimum options">
+      <input type="text"
+             fg-field-redraw
+             fg-input-number
+             title="The minimum number of options that should be selected."
+             name="minoptions"
+             ng-model="field.validation.minoptions"
+             class="form-control"/>
+    </div>
+
+    <div ng-if="field.validation.minoptions >= 1" >
+      <div fg-edit-validation-message="minoptions"></div>
+    </div>
+  </div>
+
+  <div class="fg-property-field-validation">
+    <div fg-property-field="maxoptions"
+         fg-property-field-label="Maximum options">
+      <input type="text"
+             fg-field-redraw
+             fg-input-number
+             title="The maximum number of options that can be selected."
+             name="maxoptions"
+             ng-model="field.validation.maxoptions"
+             class="form-control"/>
+    </div>
+
+    <div ng-if="field.validation.maxoptions >= 1" >
+      <div fg-edit-validation-message="minoptions"></div>
+    </div>
+  </div>
+
+
 </div>

src/angular-form-gen/edit/canvas/field/field.ng.html

@@ -0,0 +1,84 @@
+fg.directive('fgCheckboxlist', function() {
+
+  function validateRequired(validation, value, options) {
+
+    var required = validation ? validation.required : false;
+
+    // Set in field-templates/default/checkboxlist.ng.html
+
+    if(required) {
+
+      // Ensures that at least one option is checked
+
+      var x = options.length;
+
+      while(x--) {
+        if(value[options[x].value]) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    return true;
+
+  }
+
+  function selectionCount(value) {
+    var c = 0;
+
+    for(var k in value) {
+      if(value[k]) {
+        c += 1;
+      }
+    }
+
+    return c;
+  }
+
+  return {
+    require: ['^fgField'],
+    link: function($scope, $element, $attrs, $ctrls) {
+
+      var field = $ctrls[0].field();
+
+      var formData = $scope.form.data, schema = field.schema;
+
+      $scope.$watchCollection(function() {
+        return formData[schema.name];
+      }, function(value, oldValue) {
+
+        // Ensure that the field is marked as dirty on changes
+        if(!field.state.$dirty && value !== oldValue) {
+          field.state.$setViewValue(value);
+        }
+
+        if(schema.validation) {
+          var required = validateRequired(schema.validation, value, schema.options);
+          field.state.$setValidity('requiredOption', required);
+
+          var minc = schema.validation.minoptions;
+          var maxc = schema.validation.maxoptions;
+
+          var min = true, max = true;
+
+          if(minc || maxc) {
+            var c = selectionCount(value);
+
+            if(minc) {
+              min = c >= schema.validation.minoptions;
+            }
+
+            if(maxc) {
+              max = c <= schema.validation.maxoptions;
+            }
+          }
+
+          field.state.$setValidity('minoptions', min);
+          field.state.$setValidity('maxoptions', max);
+        }
+      });
+    }
+  };
+});

src/angular-form-gen/field-templates/default/checkboxlist.ng.html

@@ -67,6 +67,7 @@ app.factory('Form', function (fakeHttpResolve, formData) {
 
 });
 
+
 app.factory('formData', function () {
   var forms = [
     {
@@ -91,6 +92,14 @@ app.factory('formData', function () {
               {
                 "value": "3",
                 "text": "Option 3"
+              },
+              {
+                "value": "4",
+                "text": "Option 4"
+              },
+              {
+                "value": "5",
+                "text": "Option 5"
               }
             ],
             "value": {
@@ -99,7 +108,9 @@ app.factory('formData', function () {
             },
             "validation": {
               "messages": {},
-              "required": true
+              "required": true,
+              "minoptions": 2,
+              "maxoptions": 3
             }
           },
           {