Displaying div based on dynamic boolean angular

Question

Getting input from a reactive form inside a ngFor ,I have to display "correct" or "incorrect" based on the comparison of the user answer with the exercise.question.answer value.

My idea is to create a boolean reactively but I'm struggling with the execution. I'm not being able to compare index[x] of array a with index [x] of array b every time these arrays are created.

This is the template:

<form
    fxLayout="column"
    fxLayoutGap="2px"
    [formGroup]="exerciseForm"
    (ngSubmit)="onSubmit(exerciseForm.value)"
  >
    <ul *ngFor="let exercise of exercises">
      <li>{{ exercise.instruction }}</li>
      <ul *ngFor="let question of exercise.questions; let i = index">
        <li>
          {{ question.prefix }}
          <mat-form-field>
            <input
              name="answer"
              type="text"
              id="answer"
              matInput
              [formControlName]="question.id"
            />
          </mat-form-field>
          {{ question.sufix }} -
          {{ question.translation }}
          <div *ngIf="isAnswered">
            <div *ngIf="isCorrect"><p>Correct</p></div>
            <div *ngIf="!isCorrect"><p>Incorrect</p></div>
          </div>

        </li>
      </ul>
    </ul>
    <button type="submit" mat-raised-button color="primary">Submit</button>
  </form>

this is the ts (it contains some of the methods I've been attempting)

export class ExerciseTestsComponent implements OnInit {
  exerciseForm: FormGroup;
  isAnswered: boolean; 
  isCorrect: boolean; 

  exercises: Exercise[] = [
    new Exercise("Answer this question", [
      new Question(1, "Eu", "maluco", "I am crazy", "sou"),
      new Question(2, "Eu", "doidinho", "I am cuckoo", "estou")
    ])
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createGroup();
  }

  getAnswersArray() {}

  createGroup() {
    this.exerciseForm = this.fb.group({});
    this.exercises[0].questions.forEach(control =>
      this.exerciseForm.addControl(control.id.toString(), this.fb.control(""))
    );
  }

  onSubmit(answer: TestAnswer) {
    this.isAnswered=true; 
    //** 1
    let answers = [];
    let answersInput = [];
    this.exercises[0].questions.forEach(pergunta => {
      //** 2
      answers.push(pergunta.answer);
      console.log(answers);
    });

    //** 3
    var bosta = Object;
    bosta = this.exerciseForm.value;
    console.log(bosta[1]);
    if ((answers[1] = bosta[1])) {
      console.log("pqp");
    }
    let incoming = this.exerciseForm.value;

    for (var o in incoming) {
      answersInput.push(incoming[o]);
      console.log(answersInput);
    }

    answersInput.forEach(a1 =>
      answers.forEach(a2 => {
        if (a1 === a2) {
          console.log("yay");
        } else {
          console.log("boo");
        }
      })
    );
  }
}

//** for every object created, I have to check if answer =  */

stackblitz: https://stackblitz.com/edit/angular-dzzzql

Answer 1

Then when you submit, you can compare both answers

 onSubmit(answer: Answer) {

    let answers = [];
    console.log(this.exercises)

    let answersInput = []
    this.exercises[0].questions.forEach((pergunta, index) => {
        answers.push(pergunta.answer)
        console.log(answers)
        return answers
    })

    let i = 0;
    for (const field in this.exerciseForm.controls) { // 'field' is a string
        console.log(this.exerciseForm.controls[field].value == answers[i]);
        i++;
    }


}

Working demo in Stackblitz