DEV Community


Posted on

Angular loop error

HI idk if i can ask questions here well i am creating an attendance system with core web api as the back end and angular at the front end ill provide the code
first this is the form to add attendance
<form [formGroup]="attendanceForm" (ngSubmit)="onSubmit()">
<section class="form-part">
<div class="row" id="form-part-row">
<div class="col" id="form-part-heading-col">Mark <br> Attendance</div>
<div class="col" id="form-part-date-col">
<input type="date" formControlName="date" id="date-input"
<div *ngFor="let item of getclass">
<section class="student-list" *ngFor="let student of item.students">
<div class="row" id="student-list-row">
<div class="col" id="student-list-name-col">{{student?.name}} - {{student?.rollNumber}}</div>
<div class="col" id="student-list-mark-col">
<div class="btn-group">
<button class="btn btn-present" type="button" (click)="attendanceForm.patchValue({isPresent: true, studentId:});">
<i class="fa-solid fa-hand" (click)="onPresentClick(" [ngStyle]="{ borderBottom: studentsClicked[] === true ? '3px solid #d2f9a7' : 'none' }"></i>
<button class="btn btn-absent" type="button" (click)="attendanceForm.patchValue({isPresent: false, studentId:});">
<i class="fa-solid fa-hand-fist" (click)="onAbsentClick(" [ngStyle]="{ borderBottom: studentsClicked[] === false ? '3px solid #d2f9a7' : 'none' }"></i>
<section class="mark-button">
<div class="row">
<div class="col" id="submit-button-col">
<button class="btn btn-submit" type="submit">Mark Attendacne</button>

after that the form in ts file also the method to add attendance
`this.attendanceForm ={
date: ['', Validators.required],
classid: [this.classId, Validators.required],
studentId: ['', Validators.required],
isPresent: ['', Validators.required],
onSubmit(): void {
this.attendanceRecords = []; // clear the array

if (this.attendanceForm.invalid) {

this.getclass.forEach((cls) => {
  cls.students.forEach((student) => {
    const isPresent = this.attendanceForm.get(`isPresent`)?.value;
    const studentId =;
    this.attendanceRecords.push({ studentId: studentId, isPresent: isPresent });


this.service.addAttendance(this.classId, this.attendanceForm.get('date')?.value, this.attendanceRecords).subscribe(() => {
  console.log('Attendance added successfully.');
}, error => {
Enter fullscreen mode Exit fullscreen mode

now the problem is when i post the form it submits ispresent value to ever student by the value later added for example if i select present button(true) for studentA and absent button(false) for StudentB and then submit the form the isPresent value for both the students is set to false i tried but cannot come up with a solution

Top comments (0)