NgTrueValue NgFalseValue equivalent directive in angular 2+
Code :
import {Directive, ElementRef, forwardRef, HostListener, Input, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@Directive({
selector: 'input[type=radio][trueFalseValue]',
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) {}
private propagateChange = (_: any) => {};
@HostListener('change', ['$event'])
onHostChange(ev) {
this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
}
writeValue(obj: any): void {
if (obj == null) {
this.propagateChange(this.falseValue);
}
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;
if (this.elementRef.nativeElement.value == null) {
this.propagateChange(this.falseValue);
}
}
registerOnTouched(fn: any): void {}
setDisabledState?(isDisabled: boolean): void {}
}
How to use:
<input type="radio" name="{{someName}}" trueFalseValue
[(ngModel)]="radioVal"
[trueValue]="abc"
[falseValue]="xyz"/>
import {Directive, ElementRef, forwardRef, HostListener, Input, Renderer2} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@Directive({
selector: 'input[type=radio][trueFalseValue]',
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) {}
private propagateChange = (_: any) => {};
@HostListener('change', ['$event'])
onHostChange(ev) {
this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
}
writeValue(obj: any): void {
if (obj == null) {
this.propagateChange(this.falseValue);
}
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;
if (this.elementRef.nativeElement.value == null) {
this.propagateChange(this.falseValue);
}
}
registerOnTouched(fn: any): void {}
setDisabledState?(isDisabled: boolean): void {}
}
How to use:
<input type="radio" name="{{someName}}" trueFalseValue
[(ngModel)]="radioVal"
[trueValue]="abc"
[falseValue]="xyz"/>
Comments
Post a Comment