Issue
I am working in Angular 15
and Angular Material 14
and below is the HTML code I am using as to display list of checkboxes
<div *ngFor="let control of checkboxArray.controls;let i = index" >
<mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);">
{{ checkboxItems[i].name }}
</mat-checkbox>
</div>
Below is the code of onCheckedChange
function in Angular
onCheckedChange(index: number) {
this.sortCheckboxArray();
const checkboxItem = this.checkboxItems[index];
const control = this.checkboxArray.at(index);
if (control) {
if (control.value) {
this.lists.push(checkboxItem.id.toString());
} else {
this.lists.pop(checkboxItem.id.toString());
}
}
this.updateSubscriberGroupsCount();
this.cdr.detectChanges();
}
While loading the checkboxlist controls, the names are disappearing for most of the controls as below...
When I check checkbox, then in this onCheckedChange
function, the control.value is always returning false. Where it is going wrong? Could not understand..
EDIT
Below is my previous code for addCheckbox
function
addCheckbox(id: number, name: string, checked: boolean) {
const control = new FormControl(false);
this.checkboxArray.push(control);
const checkboxItem: SubscribersNotification = { id:id, name:name, checked: false };
this.checkboxItems.push(checkboxItem);
}
With this checkbox controls are loading properly. But check/uncheck of the checkbox controls are not working..
How to modify this code so that it listens to the check/uncheck properly...
Solution
Here is a working version, with the checkbox logic working fine, hope it helps!
We need to get the form group using control.value
, but we also need to access the inner form control and then get the checkbox value!
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
FormArray,
FormControl,
FormGroup,
ReactiveFormsModule,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { MatCheckboxModule } from '@angular/material/checkbox';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule],
template: `
<form [formGroup]="form">
<div formArrayName="array">
<div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i">
<mat-checkbox formControlName="test" style="margin-bottom: 15px;"
(change)="onCheckedChange(i);">
{{ checkboxItems[i].name }}
</mat-checkbox>
</div>
</div>
</form>
`,
})
export class App {
name = 'Angular';
form = new FormGroup({
array: new FormArray([]),
});
lists = [];
checkboxItems: any = [];
ngOnInit() {
this.add();
this.add();
this.add();
}
add() {
this.checkboxArray.push(
new FormGroup({
test: new FormControl(false),
})
);
this.checkboxItems.push({ name: 'test' });
}
get checkboxArray() {
return this.form.get('array') as FormArray;
}
onCheckedChange(index: number) {
// this.sortCheckboxArray();
// const checkboxItem = this.checkboxItems[index];
const control = this.checkboxArray.at(index);
if (control) {
if (control.value.test) {
console.log('checked');
// this.lists.push(checkboxItem.id.toString());
} else {
console.log('not checked');
// this.lists.pop(checkboxItem.id.toString());
}
}
// this.updateSubscriberGroupsCount();
// this.cdr.detectChanges();
}
}
bootstrapApplication(App);
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.