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: ` -
+
- +
- + [ngClass]="{'p-highlight': checked(), 'p-disabled': disabled, 'p-focus': focused}"> +
`, 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. +