50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { Directive, ElementRef, forwardRef, HostListener, Input, Renderer2 } from "@angular/core";
|
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } 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 */
|
|
};
|
|
}
|