angular loop form problem

Question

HI so i am trying to develop an attendance system in asp.net core web api and angular as front end now ill provide the code first
First the form:

 <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"
        class="form-control">
      </div>
    </div>
  </section>
  <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: student.id});">
              <i class="fa-solid fa-hand" (click)="onPresentClick(student.id)" [ngStyle]="{ borderBottom: studentsClicked[student.id] === true ? '3px solid #d2f9a7' : 'none' }"></i>
            </button>
            <button class="btn btn-absent" type="button" (click)="attendanceForm.patchValue({isPresent: false, studentId: student.id});">
              <i class="fa-solid fa-hand-fist" (click)="onAbsentClick(student.id)" [ngStyle]="{ borderBottom: studentsClicked[student.id] === false ? '3px solid #d2f9a7' : 'none' }"></i>
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
  <section class="mark-button">
    <div class="row">
      <div class="col" id="submit-button-col">
        <button class="btn btn-submit" type="submit">Mark Attendacne</button>
      </div>
    </div>
  </section>
</form>

after that the form in ts file
and also the method

    this.attendanceForm = this.fb.group({
      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) {
      return;
    }
  
    this.getclass.forEach((cls) => {
      cls.students.forEach((student) => {
        const isPresent = this.attendanceForm.get(`isPresent`)?.value;
        const studentId = student.id;
        this.attendanceRecords.push({ studentId: studentId, isPresent: isPresent });
      });
    });
  
    console.log(JSON.stringify(this.attendanceRecords));
  
    this.service.addAttendance(this.classId, this.attendanceForm.get('date')?.value, this.attendanceRecords).subscribe(() => {
      console.log('Attendance added successfully.');
      console.log(this.attendanceRecords);
    }, error => {
      console.log(error);
    });
  }

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

Answer 1

as this is an angular coding question, you might do better on a forum that supports angular. try stackoverflow.