Skip to content

Commit

Permalink
Fixed #10656 - Add trueValue-falseValue to Checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Sep 22, 2021
1 parent 724775f commit fcd9247
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 38 deletions.
63 changes: 27 additions & 36 deletions src/app/components/checkbox/checkbox.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -11,18 +12,18 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
@Component({
selector: 'p-checkbox',
template: `
<div [ngStyle]="style" [ngClass]="{'p-checkbox p-component': true, 'p-checkbox-checked': checked, 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused}" [class]="styleClass">
<div [ngStyle]="style" [ngClass]="{'p-checkbox p-component': true, 'p-checkbox-checked': checked(), 'p-checkbox-disabled': disabled, 'p-checkbox-focused': focused}" [class]="styleClass">
<div class="p-hidden-accessible">
<input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [readonly]="readonly" [value]="value" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()"
(change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.aria-checked]="checked" [attr.required]="required">
<input #cb type="checkbox" [attr.id]="inputId" [attr.name]="name" [readonly]="readonly" [value]="value" [checked]="checked()" (focus)="onFocus()" (blur)="onBlur()"
(change)="handleChange($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.aria-checked]="checked()" [attr.required]="required">
</div>
<div class="p-checkbox-box" (click)="onClick($event,cb,true)"
[ngClass]="{'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}">
<span class="p-checkbox-icon" [ngClass]="checked ? checkboxIcon : null"></span>
[ngClass]="{'p-highlight': checked(), 'p-disabled': disabled, 'p-focus': focused}">
<span class="p-checkbox-icon" [ngClass]="checked() ? checkboxIcon : null"></span>
</div>
</div>
<label (click)="onClick($event,cb,true)" [class]="labelStyleClass"
[ngClass]="{'p-checkbox-label': true, 'p-checkbox-label-active':checked, 'p-disabled':disabled, 'p-checkbox-label-focus':focused}"
[ngClass]="{'p-checkbox-label': true, 'p-checkbox-label-active':checked(), 'p-disabled':disabled, 'p-checkbox-label-focus':focused}"
*ngIf="label" [attr.for]="inputId">{{label}}</label>
`,
providers: [CHECKBOX_VALUE_ACCESSOR],
Expand Down Expand Up @@ -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<any> = new EventEmitter();
Expand All @@ -79,8 +84,6 @@ export class Checkbox implements ControlValueAccessor {

focused: boolean = false;

checked: boolean = false;

constructor(private cd: ChangeDetectorRef) {}

onClick(event,checkbox,focus:boolean) {
Expand All @@ -90,7 +93,6 @@ export class Checkbox implements ControlValueAccessor {
return;
}

this.checked = !this.checked;
this.updateModel(event);

if (focus) {
Expand All @@ -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;
}
Expand All @@ -158,7 +146,6 @@ export class Checkbox implements ControlValueAccessor {

writeValue(model: any) : void {
this.model = model;
this.checked = this.isChecked();
this.cd.markForCheck();
}

Expand All @@ -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({
Expand Down
16 changes: 14 additions & 2 deletions src/app/showcase/components/checkbox/checkboxdemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ <h5>Import</h5>

<h5>Getting Started</h5>
<p>Checkbox can either be used in multiple selection with other checkboxes or as a single checkbox to provide a boolean value.</p>

<h4>Multiple Values</h4>
<p>Multiple mode is enabled by default, ngModel property refers to an array to bind the selected values.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
Expand Down Expand Up @@ -97,7 +97,7 @@ <h4>Boolean Value</h4>
</app-code>

<h5>Model Driven Forms</h5>
<p>Checkbox can be used in a model driven form as well. In this case, due to an <a href="https://github.com/angular/angular/issues/17685">issue</a> in Angular bind the formControl instance
<p>Checkbox can be used in a model driven form as well. In this case, due to an <a href="https://github.com/angular/angular/issues/17685">issue</a> in Angular bind the formControl instance
instead of using formControlName.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;!-- Wrong --&gt;
Expand Down Expand Up @@ -209,6 +209,18 @@ <h5>Properties</h5>
<td>false</td>
<td>When present, it specifies that checkbox must be checked before submitting the form.</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>
Expand Down

0 comments on commit fcd9247

Please sign in to comment.