Get options selected in typescript and check if there are no duplicates and the correct answers are selected with an ngFor

Issue

I have the following HTML code:

<div class="select-inner" *ngFor="let art of pictures">
        <label>{{ art.id }}</label>
        <select (change)="onChange($event, art.id)">
          <option *ngFor="let street of streetNames">{{ street.name }}</option>
        </select>
      </div>

I try to get the values of the selected items and check if they are correct (no duplicates). The user has 13 values they can select from. The assignment is to tell which 6 animals are missing in a mural. To make it easier I did not want to have an specific order. The answer that should be selected:

• Ezel
• Paard
• Kikker
• Slang
• Vleermuis
• Rog

checkAnswers() {
    return (
      // check for the values and check if there are no duplicates
    );
  }

  nextPage() {
    if (this.checkAnswers()) {
      this.route.navigate(['/', 'paardenos']);
    } else {
      this.translate.get('BUTTONS.ALERT').subscribe((text: string) => {
        alert(text);
      });
    }
  }

I have no idea how to do this so my typescript code can be found above. Tried searching the web but it seems people always have a different name for their second list.

Any help would be appreciated!

Solution

You need to just use ngModel of template driven forms to store the selected values.

Then you can use [...new Set(this.selected)] to remove duplicates and compare the lengths of the original to the set array and determine if there are dups.

to check if the selection is the correct answer, we create an array, with the values for correct answer, then we get the array of selected values and use the javascript array function every to check if the selected values match the correct answer values!

Hope this helps you get the final solution.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="select-inner" *ngFor="let art of pictures; let i = index">
        <label>{{ art.id }}</label>
        <select [(ngModel)]="selected[i]">
          <option *ngFor="let street of streetNames">{{ street.name }}</option>
        </select>
      </div>
      <button (click)="nextPage()"> Next</button>
  `,
})
export class App {
  name = 'Angular';
  pictures = [
    { id: '1' },
    { id: '2' },
    { id: '3' },
    { id: '4' },
    { id: '5' },
    { id: '6' },
  ];
  // create a selected array to store the values with initial length as 6 and null values
  selected = new Array(this.pictures.length).fill(null);
  correctAnswer = ['Ezel', 'Paard', 'Kikker', 'Slang', 'Vleermuis', 'Rog'];
  streetNames = [
    { name: 'Ezel' },
    { name: 'Paard' },
    { name: 'Kikker' },
    { name: 'Slang' },
    { name: 'Vleermuis' },
    { name: 'Rog' },
    { name: 'test1' },
    { name: 'test2' },
    { name: 'test3' },
    { name: 'test4' },
    { name: 'test5' },
  ];
  checkAnswers() {
    // set removes duplicates in an array, if there are dups both arrays wont match.
    const noDups = [...new Set(this.selected)];
    console.log(noDups);
    return (
      noDups.length === this.selected.length &&
      // check if the values match what should be the correct answer irrespective of order
      this.selected.every((item: any) => this.correctAnswer.includes(item))
    );
  }

  nextPage() {
    if (this.checkAnswers()) {
      alert('success!');
    } else {
      alert('failure!');
    }
  }
}

bootstrapApplication(App);

stackblitz

Answered By - Naren Murali