2018-06-06 20:29:59 +02:00
|
|
|
import {
|
|
|
|
Directive,
|
|
|
|
ElementRef,
|
|
|
|
forwardRef,
|
|
|
|
HostListener,
|
|
|
|
Input,
|
|
|
|
Renderer2,
|
|
|
|
} from '@angular/core';
|
|
|
|
import {
|
|
|
|
ControlValueAccessor,
|
|
|
|
NgControl,
|
2020-08-17 18:14:40 +02:00
|
|
|
NG_VALUE_ACCESSOR,
|
2018-06-06 20:29:59 +02:00
|
|
|
} from '@angular/forms';
|
|
|
|
|
|
|
|
// ref: https://juristr.com/blog/2018/02/ng-true-value-directive/
|
|
|
|
@Directive({
|
|
|
|
selector: 'input[type=checkbox][appTrueFalseValue]',
|
|
|
|
providers: [
|
|
|
|
{
|
|
|
|
provide: NG_VALUE_ACCESSOR,
|
|
|
|
useExisting: forwardRef(() => TrueFalseValueDirective),
|
|
|
|
multi: true,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
})
|
|
|
|
export class TrueFalseValueDirective implements ControlValueAccessor {
|
|
|
|
@Input() trueValue = true;
|
|
|
|
@Input() falseValue = false;
|
|
|
|
|
|
|
|
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
|
|
|
|
|
|
|
|
@HostListener('change', ['$event'])
|
|
|
|
onHostChange(ev: any) {
|
|
|
|
this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
|
|
|
|
}
|
|
|
|
|
|
|
|
writeValue(obj: any): void {
|
|
|
|
if (obj === this.trueValue) {
|
|
|
|
this.renderer.setProperty(this.elementRef.nativeElement, 'checked', true);
|
|
|
|
} else {
|
|
|
|
this.renderer.setProperty(this.elementRef.nativeElement, 'checked', false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
registerOnChange(fn: any): void {
|
|
|
|
this.propagateChange = fn;
|
|
|
|
}
|
|
|
|
|
|
|
|
registerOnTouched(fn: any): void { /* nothing */ }
|
|
|
|
|
|
|
|
setDisabledState?(isDisabled: boolean): void { /* nothing */ }
|
|
|
|
|
|
|
|
private propagateChange = (_: any) => { /* nothing */ };
|
|
|
|
}
|