Formatters and Parsers , ng-true-value & ng-false-value directive for Angular make workable

Currently I am created two directive to project . But one directive useed for if checkbox is checked , I will get 1, if checked is false i will get 0. Another Directive is used for convert value "1" to 1 like that.

I am using TrueFalseValueDirective only few checkbox

Intension to achieve the Formatters and Parsers - NumberDirective "ng-true-value" and "ng-false-value" alternatives in Angular - TrueFalseValueDirective

Issue:

Both directive is not working. either one directive is working. I need to make two directive workable

Template:

<form #f="ngForm">
<input type="checkbox" [(ngModel)]="data.option" name="options" checked="data.checked" trueFalseValue>

<select [(ngModel)]="data.selection" name="selection">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>

<input type="text" name="Text1" [disabled]="data.selection!==1" [(ngModel)]="data.Text1" />
<input type="text" name="Text2" [disabled]="data.selection!==2" [(ngModel)]="data.Text2" />
<input type="text" name="Text3" [disabled]="data.selection!==3" [(ngModel)]="data.Text3" />
</form>

@Directive({
selector: '[ngModel]',
})
export class NumberDirective implements ControlValueAccessor {
onChange;

constructor( private renderer : Renderer2,
private element : ElementRef, public ngControl: NgControl ) {

if (ngControl) {
ngControl.valueAccessor = this;
}
}
@HostListener('input', [ '$event.target.value' ])
input( value ) {
this.onChange(parsrInt(value, 10);
}
writeValue( value : any ) : void {
const element = this.element.nativeElement;
this.renderer.setProperty(element, 'value', String(value));
}

registerOnChange( fn : any ) : void {
this.onChange = fn;
}

}

import {
Directive,
Input,
forwardRef,
HostListener,
ElementRef,
Renderer2
} from '@angular/core';
import {
ControlValueAccessor,

NgControl
} from '@angular/forms';

@Directive({
selector: 'trueFalseValue',

})
export class TrueFalseValueDirective implements ControlValueAccessor {
private propagateChange = (_: any) => {};
trueValue = 1; // some time true
falseValue = 0; // sometime true


constructor(private elementRef: ElementRef, private renderer: Renderer2, public ngControl: NgControl, ) {
if (ngControl) {
ngControl.valueAccessor = this;
}}

@HostListener('change', ['$event'])
onHostChange(ev) {
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 {}

setDisabledState?(isDisabled: boolean): void {}
}


Refered URL :

1. https://netbasal.com/angular-formatters-and-parsers-8388e2599a0e
2. https://juri.dev/blog/2018/02/ng-true-value-directive/

Continue reading...