feat(bootstrap): support custom-inline for radio/checkbox (#2133)

fix #2103 Co-authored-by: Gary Lockett <gary@hownowcreativecow.co.uk>
ngx-formly · Mar 17, 2020 · 8b46f95 · 8b46f95
1 parent 666e960
commit 8b46f95
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/src/bootstrap/src/lib/types/checkbox.ts b/src/bootstrap/src/lib/types/checkbox.ts
@@ -4,13 +4,23 @@ import { FieldType } from '@ngx-formly/core';
 @Component({
   selector: 'formly-field-checkbox',
   template: `
-    <div class="custom-control custom-checkbox">
-      <input class="custom-control-input" type="checkbox"
+    <div [ngClass]="{
+      'form-check': to.formCheck.indexOf('custom') === -1,
+      'form-check-inline': to.formCheck === 'inline',
+      'custom-control custom-checkbox': to.formCheck.indexOf('custom') === 0,
+      'custom-control-inline': to.formCheck === 'custom-inline'
+    }">
+      <input type="checkbox"
         [class.is-invalid]="showError"
+        [class.form-check-input]="to.formCheck.indexOf('custom') === -1"
+        [class.custom-control-input]="to.formCheck.indexOf('custom') === 0"
         [indeterminate]="to.indeterminate && formControl.value === null"
         [formControl]="formControl"
         [formlyAttributes]="field">
-      <label class="custom-control-label" [for]="id">
+      <label [for]="id"
+        [class.form-check-label]="to.formCheck.indexOf('custom') === -1"
+        [class.custom-control-label]="to.formCheck.indexOf('custom') === 0"
+      >
         {{ to.label }}
         <span *ngIf="to.required && to.hideRequiredMarker !== true">*</span>
       </label>
@@ -22,6 +32,7 @@ export class FormlyFieldCheckbox extends FieldType {
     templateOptions: {
       indeterminate: true,
       hideLabel: true,
+      formCheck: 'custom', // 'custom' | 'stacked' | 'inline' | 'custom-inline'
     },
   };
 }
diff --git a/src/bootstrap/src/lib/types/multicheckbox.ts b/src/bootstrap/src/lib/types/multicheckbox.ts
@@ -6,31 +6,36 @@ import { FieldType } from '@ngx-formly/core';
   template: `
     <div>
       <div *ngFor="let option of to.options | formlySelectOptions:field | async; let i = index;"
-        [ngClass]="{ 'form-check': to.formCheck !== 'custom', 'form-check-inline': to.formCheck === 'inline', 'custom-control custom-checkbox': to.formCheck === 'custom' }"
+        [ngClass]="{
+          'form-check': to.formCheck.indexOf('custom') === -1,
+          'form-check-inline': to.formCheck === 'inline',
+          'custom-control custom-checkbox': to.formCheck.indexOf('custom') === 0,
+          'custom-control-inline': to.formCheck === 'custom-inline'
+        }"
       >
         <input type="checkbox"
           [id]="id + '_' + i"
-          [class.form-check-input]="to.formCheck !== 'custom'"
-          [class.custom-control-input]="to.formCheck === 'custom'"
+          [class.form-check-input]="to.formCheck.indexOf('custom') === -1"
+          [class.custom-control-input]="to.formCheck.indexOf('custom') === 0"
           [value]="option.value"
           [checked]="isChecked(option)"
           [formlyAttributes]="field"
           (change)="onChange(option.value, $event.target.checked)">
         <label
-          [class.form-check-label]="to.formCheck !== 'custom'"
-          [class.custom-control-label]="to.formCheck === 'custom'"
+          [class.form-check-label]="to.formCheck.indexOf('custom') === -1"
+          [class.custom-control-label]="to.formCheck.indexOf('custom') === 0"
           [for]="id + '_' + i">
           {{ option.label }}
         </label>
       </div>
-    <div>
+    </div>
   `,
 })
 export class FormlyFieldMultiCheckbox extends FieldType {
   defaultOptions = {
     templateOptions: {
       options: [],
-      formCheck: 'custom', // 'custom' | 'stacked' | 'inline'
+      formCheck: 'custom', // 'custom' | 'custom-inline' | 'stacked' | 'inline'
     },
   };
 

diff --git a/src/bootstrap/src/lib/types/radio.ts b/src/bootstrap/src/lib/types/radio.ts
@@ -6,21 +6,26 @@ import { FieldType } from '@ngx-formly/core';
   template: `
     <div>
       <div *ngFor="let option of to.options | formlySelectOptions:field | async; let i = index;"
-        [ngClass]="{ 'form-check': to.formCheck !== 'custom', 'form-check-inline': to.formCheck === 'inline', 'custom-control custom-radio': to.formCheck === 'custom' }"
+        [ngClass]="{
+          'form-check': to.formCheck.indexOf('custom') === -1,
+          'form-check-inline': to.formCheck === 'inline',
+          'custom-control custom-radio': to.formCheck.indexOf('custom') === 0,
+          'custom-control-inline': to.formCheck === 'custom-inline'
+        }"
       >
         <input type="radio"
           [id]="id + '_' + i"
-          [class.form-check-input]="to.formCheck !== 'custom'"
-          [class.custom-control-input]="to.formCheck === 'custom'"
+          [class.form-check-input]="to.formCheck.indexOf('custom') === -1"
+          [class.custom-control-input]="to.formCheck.indexOf('custom') === 0"
           [name]="field.name || id"
           [class.is-invalid]="showError"
           [attr.value]="option.value"
           [value]="option.value"
           [formControl]="formControl"
           [formlyAttributes]="field">
         <label
-          [class.form-check-label]="to.formCheck !== 'custom'"
-          [class.custom-control-label]="to.formCheck === 'custom'"
+          [class.form-check-label]="to.formCheck.indexOf('custom') === -1"
+          [class.custom-control-label]="to.formCheck.indexOf('custom') === 0"
           [for]="id + '_' + i">
           {{ option.label }}
         </label>
@@ -32,7 +37,7 @@ export class FormlyFieldRadio extends FieldType {
   defaultOptions = {
     templateOptions: {
       options: [],
-      formCheck: 'custom', // 'custom' | 'stacked' | 'inline'
+      formCheck: 'custom', // 'custom' | 'custom-inline' | 'stacked' | 'inline'
     },
   };
 }