DynamicCheckboxGroup has arrived #32

udos86 · Jun 27, 2016 · 6f6794d · 6f6794d
1 parent 79b40be
commit 6f6794d
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 34 deletions.
diff --git a/example/app/app.routes.ts b/example/app/app.routes.ts
@@ -5,7 +5,7 @@ import {FoundationExampleComponent} from "./foundation/foundation-example.compon
 import {MaterialExampleComponent} from "./material/material-example.component";
 
 export const routes: RouterConfig = [
-    {path: "", redirectTo: "/example-bootstrap", terminal: true},
+    {path: "", redirectTo: "/example-basic", terminal: true},
     {path: "example-basic", component: BasicExampleComponent},
     {path: "example-bootstrap", component: BootstrapExampleComponent},
     {path: "example-foundation", component: FoundationExampleComponent},

diff --git a/example/app/bootstrap/bootstrap-example.model.ts b/example/app/bootstrap/bootstrap-example.model.ts
@@ -1,6 +1,7 @@
 import {
     DynamicFormModel,
     DynamicCheckboxModel,
+    DynamicCheckboxGroupModel,
     DynamicInputModel,
     DynamicSelectModel,
     DynamicRadioGroupModel,
@@ -66,6 +67,39 @@ export const BOOTSTRAP_EXAMPLE_MODEL: DynamicFormModel = new DynamicFormModel([
         }
     ),
 
+    new DynamicCheckboxGroupModel(
+        {
+            id: "bootstrapCheckboxGroup",
+            items: [
+                new DynamicCheckboxModel({
+
+                    id: "checkboxGroup1",
+                    label: {
+                        text: "Checkbox 1"
+                    }
+                }),
+                new DynamicCheckboxModel({
+
+                    id: "checkboxGroup2",
+                    label: {
+                        text: "Checkbox 2"
+                    }
+                })
+            ],
+            label: {
+                text: "Example Checkbox Group"
+            }
+        },
+        {
+            grid: {
+                control: "col-sm-9",
+                label: "col-sm-3"
+            },
+            label: "control-label"
+        }
+    ),
+
+
     new DynamicRadioGroupModel<string>(
         {
             id: "bootstrapRadioGroup",

diff --git a/example/app/foundation/foundation-example.model.ts b/example/app/foundation/foundation-example.model.ts
@@ -1,6 +1,7 @@
 import {
     DynamicFormModel,
     DynamicCheckboxModel,
+    DynamicCheckboxGroupModel,
     DynamicInputModel,
     DynamicSelectModel,
     DynamicRadioGroupModel,
@@ -11,7 +12,7 @@ export const FOUNDATION_EXAMPLE_MODEL: DynamicFormModel = new DynamicFormModel([
 
     new DynamicSelectModel<string>(
         {
-            id: "bootstrapSelect",
+            id: "foundationSelect",
             label: {
                 text: "Example Select"
             },
@@ -46,31 +47,9 @@ export const FOUNDATION_EXAMPLE_MODEL: DynamicFormModel = new DynamicFormModel([
         }
     ),
 
-    new DynamicInputModel(
-        {
-            help: "Just a sample help text",
-            id: "bootstrapInput",
-            label: {
-                text: "Example Input"
-            },
-            maxLength: 51,
-            placeholder: "example input",
-            prefix: "Prefix",
-            suffix: "Suffix"
-        },
-        {
-            container: "row",
-            grid: {
-                label: "small-3 columns",
-                control: "small-9 columns"
-            },
-            label: "text-right middle"
-        }
-    ),
-
     new DynamicRadioGroupModel<string>(
         {
-            id: "bootstrapRadioGroup",
+            id: "foundationRadioGroup",
             label: {
                 text: "Example Radio Group"
             },
@@ -105,9 +84,64 @@ export const FOUNDATION_EXAMPLE_MODEL: DynamicFormModel = new DynamicFormModel([
         }
     ),
 
+    new DynamicInputModel(
+        {
+            help: "Just a sample help text",
+            id: "foundationInput",
+            label: {
+                text: "Example Input"
+            },
+            maxLength: 51,
+            placeholder: "example input",
+            prefix: "Prefix",
+            suffix: "Suffix"
+        },
+        {
+            container: "row",
+            grid: {
+                label: "small-3 columns",
+                control: "small-9 columns"
+            },
+            label: "text-right middle"
+        }
+    ),
+
+    new DynamicCheckboxGroupModel(
+        {
+            id: "foundationCheckboxGroup",
+            items: [
+                new DynamicCheckboxModel({
+
+                    id: "foundationCheckbox1",
+                    label: {
+                        text: "Test 1"
+                    }
+                }),
+                new DynamicCheckboxModel({
+
+                    id: "foundationCheckbox2",
+                    label: {
+                        text: "Test 2"
+                    }
+                })
+            ],
+            label: {
+                text: "Example Checkbox Group"
+            }
+        },
+        {
+            container: "row",
+            grid: {
+                label: "small-3 columns",
+                control: "small-9 columns"
+            },
+            label: "text-right"
+        }
+    ),
+
     new DynamicTextAreaModel(
         {
-            id: "bootstrapTextArea",
+            id: "foundationTextArea",
             label: {
                 text: "Example Textarea"
             },
@@ -126,7 +160,7 @@ export const FOUNDATION_EXAMPLE_MODEL: DynamicFormModel = new DynamicFormModel([
 
     new DynamicCheckboxModel(
         {
-            id: "bootstrapCheckbox",
+            id: "foundationCheckbox",
             label: {
                 text: "I do agree"
             }

diff --git a/modules/core/index.ts b/modules/core/index.ts
@@ -6,8 +6,8 @@ export * from "./src/service/dynamic-form.service";
 export * from "./src/component/dynamic-form-control.component";
 export * from "./src/utils";
 
-
 export * from "./src/model/checkbox/dynamic-checkbox.model";
+export * from "./src/model/checkbox/dynamic-checkbox-group.model";
 export * from "./src/model/input/dynamic-input.model";
 export * from "./src/model/radio/dynamic-radio-group.model";
 export * from "./src/model/select/dynamic-select.model";

diff --git a/modules/ui-basic/src/dynamic-form-basic.component.html b/modules/ui-basic/src/dynamic-form-basic.component.html
@@ -40,7 +40,11 @@
            (focus)="onFocus($event)"/>
 
 
-    <span *ngSwitchCase="'RADIO_GROUP'">
+    <fieldset *ngSwitchCase="'RADIO_GROUP'"
+              role="radiogroup"
+              [id]="model.id">
+
+        <legend *ngIf="model.legend">{{model.legend}}</legend>
 
         <label *ngFor="let option of model.options">
 
@@ -49,12 +53,9 @@
                    [disabled]="!!option.disabled"
                    [value]="option.value"
                    [ngClass]="model.cls.control"
-                   [(ngModel)]="model.value">
-            {{option.text}}
-
-        </label>
+                   [(ngModel)]="model.value">{{option.text}}</label>
 
-    </span>
+    </fieldset>
 
 
     <select *ngSwitchCase="'SELECT'"

diff --git a/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.html b/modules/ui-bootstrap/src/dynamic-form-bootstrap.component.html
@@ -38,6 +38,36 @@
     <div *ngIf="!isCheckbox"
          [ngClass]="model.cls.grid.control">
 
+        <fieldset *ngSwitchCase="'CHECKBOX_GROUP'"
+                  [formGroupName]="model.id"
+                  [id]="model.id">
+
+            <legend *ngIf="model.legend">{{model.legend}}</legend>
+
+            <div *ngFor="let item of model.items"
+                 class="checkbox"
+                 [class.disabled]="item.disabled">
+
+                <label [attr.for]="item.id"
+                       [ngClass]="item.cls.label">
+
+                    <input type="checkbox"
+                           [disabled]="item.disabled"
+                           [formControlName]="item.id"
+                           [id]="item.id"
+                           [name]="item.name"
+                           [value]="item.value"
+                           [ngClass]="item.cls.control"
+                           [(ngModel)]="item.value"
+                           (blur)="onBlur($event)"
+                           (focus)="onFocus($event)"/>{{model.label.text}}
+                </label>
+
+            </div>
+
+        </fieldset>
+
+
         <div *ngSwitchCase="'INPUT'"
              [class.input-group]="model.prefix || model.suffix">