Fixed #10650 - Add trueValue-falseValue to InputSwitch

primefaces · Sep 22, 2021 · d3b072e · d3b072e
1 parent 069dfcf
commit d3b072e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/app/components/inputswitch/inputswitch.ts b/src/app/components/inputswitch/inputswitch.ts
@@ -11,11 +11,11 @@ export const INPUTSWITCH_VALUE_ACCESSOR: any = {
 @Component({
     selector: 'p-inputSwitch',
     template: `
-        <div [ngClass]="{'p-inputswitch p-component': true, 'p-inputswitch-checked': checked, 'p-disabled': disabled, 'p-focus': focused}"
+        <div [ngClass]="{'p-inputswitch p-component': true, 'p-inputswitch-checked': checked(), 'p-disabled': disabled, 'p-focus': focused}"
             [ngStyle]="style" [class]="styleClass" (click)="onClick($event, cb)">
             <div class="p-hidden-accessible">
-                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [attr.tabindex]="tabindex" [checked]="checked" (change)="onInputChange($event)"
-                    (focus)="onFocus($event)" (blur)="onBlur($event)" [disabled]="disabled" role="switch" [attr.aria-checked]="checked" [attr.aria-labelledby]="ariaLabelledBy"/>
+                <input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [attr.tabindex]="tabindex" [checked]="checked()" (change)="onInputChange($event)"
+                    (focus)="onFocus($event)" (blur)="onBlur($event)" [disabled]="disabled" role="switch" [attr.aria-checked]="checked()" [attr.aria-labelledby]="ariaLabelledBy"/>
             </div>
             <span class="p-inputswitch-slider"></span>
         </div>
@@ -44,11 +44,15 @@ export class InputSwitch implements ControlValueAccessor {
 
     @Input() readonly: boolean;
 
+    @Input() trueValue: any = true;
+
+    @Input() falseValue: any = false;
+
     @Input() ariaLabelledBy: string;
 
     @Output() onChange: EventEmitter<any> = new EventEmitter();
 
-    checked: boolean = false;
+    modelValue: any = false;
 
     focused: boolean = false;
 
@@ -74,15 +78,15 @@ export class InputSwitch implements ControlValueAccessor {
     }
 
     toggle(event: Event) {
-        this.updateModel(event, !this.checked);
+        this.updateModel(event, !this.checked());
     }
 
     updateModel(event: Event, value: boolean) {
-        this.checked = value;
-        this.onModelChange(this.checked);
+        this.modelValue = value ? this.trueValue : this.falseValue;
+        this.onModelChange(this.modelValue);
         this.onChange.emit({
             originalEvent: event,
-            checked: this.checked
+            checked: this.modelValue
         });
     }
 
@@ -95,8 +99,8 @@ export class InputSwitch implements ControlValueAccessor {
         this.onModelTouched();
     }
 
-    writeValue(checked: any) : void {
-        this.checked = checked;
+    writeValue(value: any) : void {
+        this.modelValue = value;
         this.cd.markForCheck();
     }
 
@@ -112,6 +116,10 @@ export class InputSwitch implements ControlValueAccessor {
         this.disabled = val;
         this.cd.markForCheck();
     }
+
+    checked() {
+        return this.modelValue === this.trueValue;
+    }
 }
 
 @NgModule({

diff --git a/src/app/showcase/components/inputswitch/inputswitchdemo.html b/src/app/showcase/components/inputswitch/inputswitchdemo.html
@@ -114,6 +114,18 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>When present, it specifies that the component cannot be edited.</td>
                         </tr>
+                        <tr>
+                            <td>trueValue</td>
+                            <td>any</td>
+                            <td>null</td>
+                            <td>Value in checked state.</td>
+                        </tr>
+                        <tr>
+                            <td>falseValue</td>
+                            <td>any</td>
+                            <td>null</td>
+                            <td>Value in unchecked state.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>