diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts
index daf705c87a9..1a95762b990 100755
--- a/src/app/components/checkbox/checkbox.ts
+++ b/src/app/components/checkbox/checkbox.ts
@@ -1,6 +1,7 @@
import {NgModule,Component,Input,Output,EventEmitter,forwardRef,ChangeDetectorRef,ViewChild,ElementRef,ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
import {CommonModule} from '@angular/common';
import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl} from '@angular/forms';
+import { ObjectUtils } from 'primeng/utils';
export const CHECKBOX_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
@@ -11,18 +12,18 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
@Component({
selector: 'p-checkbox',
template: `
-
+
{{label}}
`,
providers: [CHECKBOX_VALUE_ACCESSOR],
@@ -67,6 +68,10 @@ export class Checkbox implements ControlValueAccessor {
@Input() required: boolean;
+ @Input() trueValue: any = true;
+
+ @Input() falseValue: any = false;
+
@ViewChild('cb') inputViewChild: ElementRef;
@Output() onChange: EventEmitter
= new EventEmitter();
@@ -79,8 +84,6 @@ export class Checkbox implements ControlValueAccessor {
focused: boolean = false;
- checked: boolean = false;
-
constructor(private cd: ChangeDetectorRef) {}
onClick(event,checkbox,focus:boolean) {
@@ -90,7 +93,6 @@ export class Checkbox implements ControlValueAccessor {
return;
}
- this.checked = !this.checked;
this.updateModel(event);
if (focus) {
@@ -99,50 +101,36 @@ export class Checkbox implements ControlValueAccessor {
}
updateModel(event) {
+ let newModelValue;
+
if (!this.binary) {
- if (this.checked)
- this.addValue();
+ if (this.checked())
+ newModelValue = this.model.filter(val => !ObjectUtils.equals(val, this.value));
else
- this.removeValue();
+ newModelValue = this.model ? [...this.model, this.value] : [this.value];
- this.onModelChange(this.model);
+ this.onModelChange(newModelValue);
+ this.model = newModelValue;
if (this.formControl) {
- this.formControl.setValue(this.model);
+ this.formControl.setValue(newModelValue);
}
}
else {
- this.onModelChange(this.checked);
+ newModelValue = this.checked() ? this.falseValue : this.trueValue;
+ this.model = newModelValue;
+ this.onModelChange(newModelValue);
}
- this.onChange.emit({checked:this.checked, originalEvent: event});
+ this.onChange.emit({checked:newModelValue, originalEvent: event});
}
handleChange(event) {
if (!this.readonly) {
- this.checked = event.target.checked;
this.updateModel(event);
}
}
- isChecked(): boolean {
- if (this.binary)
- return this.model;
- else
- return this.model && this.model.indexOf(this.value) > -1;
- }
-
- removeValue() {
- this.model = this.model.filter(val => val !== this.value);
- }
-
- addValue() {
- if (this.model)
- this.model = [...this.model, this.value];
- else
- this.model = [this.value];
- }
-
onFocus() {
this.focused = true;
}
@@ -158,7 +146,6 @@ export class Checkbox implements ControlValueAccessor {
writeValue(model: any) : void {
this.model = model;
- this.checked = this.isChecked();
this.cd.markForCheck();
}
@@ -174,6 +161,10 @@ export class Checkbox implements ControlValueAccessor {
this.disabled = val;
this.cd.markForCheck();
}
+
+ checked() {
+ return this.binary ? this.model === this.trueValue : ObjectUtils.contains(this.value, this.model);
+ }
}
@NgModule({
diff --git a/src/app/showcase/components/checkbox/checkboxdemo.html b/src/app/showcase/components/checkbox/checkboxdemo.html
index 9f5a759393d..3e2fbe444b7 100755
--- a/src/app/showcase/components/checkbox/checkboxdemo.html
+++ b/src/app/showcase/components/checkbox/checkboxdemo.html
@@ -49,7 +49,7 @@ Import
Getting Started
Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.
-
+
Multiple Values
Multiple mode is enabled by default, ngModel property refers to an array to bind the selected values.
@@ -97,7 +97,7 @@ Boolean Value
Model Driven Forms
- Checkbox can be used in a model driven form as well. In this case, due to an issue in Angular bind the formControl instance
+
Checkbox can be used in a model driven form as well. In this case, due to an issue in Angular bind the formControl instance
instead of using formControlName.
<!-- Wrong -->
@@ -209,6 +209,18 @@ Properties
false
When present, it specifies that checkbox must be checked before submitting the form.
+
+ trueValue
+ any
+ null
+ Value in checked state.
+
+
+ falseValue
+ any
+ null
+ Value in unchecked state.
+