feat(bootstrap): support switch style checkboxes (#2263)

ngx-formly · Jun 1, 2020 · 5b1a771 · 5b1a771
1 parent aea28e1
commit 5b1a771
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/demo/src/app/examples/validation/custom-validation/app.module.ts b/demo/src/app/examples/validation/custom-validation/app.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule, ValidationErrors } from '@angular/forms';
+import { ReactiveFormsModule, FormControl, ValidationErrors } from '@angular/forms';
 import { FormlyModule, FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
-import { FormControl } from '@angular/forms';
 import { AppComponent } from './app.component';
 
 export function IpValidator(control: FormControl): ValidationErrors {

diff --git a/src/bootstrap/src/lib/types/checkbox.ts b/src/bootstrap/src/lib/types/checkbox.ts
@@ -7,8 +7,10 @@ import { FieldType } from '@ngx-formly/core';
     <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'
+      'custom-control': to.formCheck.indexOf('custom') === 0,
+      'custom-checkbox': to.formCheck === 'custom' || to.formCheck === 'custom-inline',
+      'custom-control-inline': to.formCheck === 'custom-inline',
+      'custom-switch': to.formCheck === 'custom-switch'
     }">
       <input type="checkbox"
         [class.is-invalid]="showError"
@@ -32,7 +34,7 @@ export class FormlyFieldCheckbox extends FieldType {
     templateOptions: {
       indeterminate: true,
       hideLabel: true,
-      formCheck: 'custom', // 'custom' | 'stacked' | 'inline' | 'custom-inline'
+      formCheck: 'custom', // 'custom' | 'custom-inline' | 'custom-switch' | 'stacked' | 'inline'
     },
   };
 }
diff --git a/src/bootstrap/src/lib/types/multicheckbox.ts b/src/bootstrap/src/lib/types/multicheckbox.ts
@@ -9,8 +9,10 @@ import { FieldType } from '@ngx-formly/core';
         [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'
+          'custom-control': to.formCheck.indexOf('custom') === 0,
+          'custom-checkbox': to.formCheck === 'custom' || to.formCheck === 'custom-inline',
+          'custom-control-inline': to.formCheck === 'custom-inline',
+          'custom-switch': to.formCheck === 'custom-switch'
         }"
       >
         <input type="checkbox"
@@ -35,7 +37,7 @@ export class FormlyFieldMultiCheckbox extends FieldType {
   defaultOptions = {
     templateOptions: {
       options: [],
-      formCheck: 'custom', // 'custom' | 'custom-inline' | 'stacked' | 'inline'
+      formCheck: 'custom', // 'custom' | 'custom-inline' | 'custom-switch' | 'stacked' | 'inline'
     },
   };