fix(bootstrap): add missing bs4 label class for radio and multicheckb…

…ox. (#682) fix #679
ngx-formly · Jan 26, 2018 · cc0b607 · cc0b607
1 parent 064e030
commit cc0b607
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/demo/src/assets/json-powered/user-form.json b/demo/src/assets/json-powered/user-form.json
@@ -28,16 +28,16 @@
       "label": "Color Preference (try this out)",
       "options": [
         {
-          "name": "No Preference",
-          "value": null
+          "value": "No Preference",
+          "key": null
         },
         {
-          "name": "Green",
-          "value": "green"
+          "value": "Green",
+          "key": "green"
         },
         {
-          "name": "Blue",
-          "value": "blue"
+          "value": "Blue",
+          "key": "blue"
         }
       ]
     }

diff --git a/src/ui-bootstrap/src/types/checkbox.ts b/src/ui-bootstrap/src/types/checkbox.ts
@@ -4,16 +4,17 @@ import { FieldType } from '@ngx-formly/core';
 @Component({
   selector: 'formly-field-checkbox',
   template: `
-    <div class="custom-control custom-checkbox">
+    <label class="custom-control custom-checkbox">
       <input type="checkbox" [formControl]="formControl"
         [attr.invalid]="showError"
         [indeterminate]="to.indeterminate && model[key] === undefined"
         [formlyAttributes]="field" class="custom-control-input">
-        <label class="custom-control-label" [attr.for]="id">
+        <span class="custom-control-label">
           {{ to.label }}
           {{ to.required ? '*' : '' }}
-        </label>
-    </div>
+        </span>
+        <span class="custom-control-indicator"></span>
+    </label>
   `,
 })
 export class FormlyFieldCheckbox extends FieldType {}
diff --git a/src/ui-bootstrap/src/types/multicheckbox.ts b/src/ui-bootstrap/src/types/multicheckbox.ts
@@ -12,7 +12,7 @@ import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
           [id]="id + '_' + i"
           [formControl]="formControl.get(option.key)"
           [formlyAttributes]="field" class="custom-control-input">
-        {{ option.value }}
+        <span class="custom-control-label">{{ option.value }}</span>
         <span class="custom-control-indicator"></span>
       </label>
     </div>

diff --git a/src/ui-bootstrap/src/types/radio.ts b/src/ui-bootstrap/src/types/radio.ts
@@ -14,7 +14,8 @@ import { FieldType } from '@ngx-formly/core';
             [value]="option.key"
             [formControl]="formControl"
             [formlyAttributes]="field" class="custom-control-input">
-          {{ option.value }}
+
+          <span class="custom-control-label">{{ option.value }}</span>
           <span class="custom-control-indicator"></span>
         </label>
       </div>