formatters-and-parser implement when changing table selection data ControlValueAccessor is not...

one directive useed for if checkbox is checked , I will get 1, if checked is false i will get 0.

For example I am selected first record selection value 0. Now checkbox is not checked. I am checked box. I am clicking second row but selection 0 but checkbox is showing checked. How to fix the issue

import {
Component,
Directive,
HostBinding,
HostListener,
Input,
Output,
EventEmitter,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
FormsModule,
NG_VALUE_ACCESSOR,
NgControl,
ControlValueAccessor,
} from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-true-false-value',
standalone: true,
template: `
<input type="checkbox" [checked]="_value === this.trueValue" (input)="valueChange($event)"/>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: TrueFalseValueComponent,
},
],
})
export class TrueFalseValueComponent implements ControlValueAccessor {
_value = 0;
@Input()
value: any;
onChange = (value: any) => {};
onTouched = () => {};
touched = false;
disabled = false;
@Input() trueValue: any = 1; // some time true
@Input() falseValue: any = 0; // sometime true

writeValue(value: number) {
this._value = value;
}

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

registerOnTouched(onTouched: any) {
this.onTouched = onTouched;
}

markAsTouched() {
if (!this.touched) {
this.onTouched();
this.touched = true;
}
}

setDisabledState(disabled: boolean) {
this.disabled = disabled;
}

valueChange(event: any) {
const value = event.target.checked;
this.markAsTouched();
this.onChange(value ? '1' : '0');
}
}

@Component({
selector: 'app-root',
imports: [FormsModule, TrueFalseValueComponent, CommonModule],
standalone: true,
template: `
@Component({
selector: 'app-root',
imports: [FormsModule, TrueFalseValueComponent, CommonModule],
standalone: true,
template: `
<label> Select Row </label>
<select [(ngModel)]="selectRow" name="selectRow" (ngModelChange)="modelChanged($event)">
<option [ngValue]="0">Row 0</option>
<option [ngValue]="1">Row 1</option>
<option [ngValue]="2">Row 2</option>
<option [ngValue]="3">Row 3</option>
</select>



<form #f="ngForm">
<app-true-false-value name="options" [(ngModel)]="data.option" />
<br/>
<select [(ngModel)]="data.selection" name="selection">
<option [ngValue]="1">option 1</option>
<option [ngValue]="2">option 2</option>
<option [ngValue]="3">option 3</option>
</select>
<br/>
<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>

{{f.form.value | json}}
`,
})
export class App {
name = 'Angular';


tableData=[
{
id:1
option: 0,
selection: 1,
Text1: 'Text1',
Text2: 'Text2',
Text3: 'Text3',
},
{
id:2
option: 0,
selection: 1,
Text1: 'Text1',
Text2: 'Text2',
Text3: 'Text3',
}
{
id:3
option: 0,
selection: 1,
Text1: 'Text1',
Text2: 'Text2',
Text3: 'Text3',
}
{
id:4
option: 1,
selection: 1,
Text1: 'Text1',
Text2: 'Text2',
Text3: 'Text3',
}
];
data:any={}
constructor{
this.data=tableData[0]
}

addToList(index:any){
this.data=tableData[insdex];
}


URL : https://stackblitz.com/edit/stackblitz-starters-5ktdwy?file=src/main.ts

Even I tried with ngonchanges

Continue reading...