How to properly store and use data from ng Form

Viewed 36

This is my code so far:

My component.html:

<div class="container">
  <Form #a ="ngForm" ngForm (ngSubmit)="onSubmit(a)">
    
    <div *ngFor="let question of questions">
      <div class = "form-group">
      <a>{{question.questionId}}. {{question.question}}</a><br>
      <input type="radio" ngModel name="Ans{{question.questionId}}" value="A" >
      <label for="html">A. {{question.optionsA}}</label><br>

      <input type="radio" ngModel name="Ans{{question.questionId}}" value="B" >
      <label for="html">B. {{question.optionsB}}</label><br>

      <input type="radio" ngModel name="Ans{{question.questionId}}" value="C" >
      <label for="html">C. {{question.optionsC}}</label><br>

      <input type="radio" ngModel name="Ans{{question.questionId}}" value="D" >
      <label for="html">D. {{question.optionsD}}</label><br>
    </div>
  </div>

    <button class="btn btn-primary " type="submit" >Submit</button>
  </Form>

  <div *ngIf="results.length >0">
    <table>
      <thead>
        <th>Question No.</th>
        <th>Correct Answer</th>
        <th>Your Answer</th>
      </thead>
      <tbody *ngFor="let question of questions">
        <td>{{question.questionId}}</td>
        <td>{{question.answer}}</td>
      </tbody>
    </table>
    {{score}}
    {{results.length}}
     </div>
</div>

and my component.ts:

import { Component, OnInit } from '@angular/core';
import { Quiz1 } from 'src/app/models/quiz1.model';
import { Quiz1Service } from 'src/app/services/quiz1.service';
import {FormControl, FormGroup, NgForm} from '@angular/forms';


@Component({
  selector: 'app-quiz1',
  templateUrl: './quiz1.component.html',
  styleUrls: ['./quiz1.component.css']
})
export class Quiz1Component implements OnInit {

  questions?: Quiz1[];
  currentQuestion: Quiz1 = {};
  currentIndex = -1;
  score = 0;
  results:String[] = [];
  //index?: String[] = ['Ans1','Ans2'];
  
  constructor(private quiz1Service: Quiz1Service) { }

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

  retrieveQuestions(): void {
    this.quiz1Service.getAll()
      .subscribe({
        next: (data: any) => {
          this.questions = data;
          console.log(data);
        },
        error: (e: any) => console.error(e)
      });
  }

  onSubmit(a:NgForm){
    this.results?.push(a.value);
    console.log(this.results);
    console.log(this.results.length)
    this.questions?.forEach((questions) => {
      console.log(questions.questionId);
      
      if(questions.answer==this.results[questions.questionId-1]){
        this.score++
        console.log(this.score)
      }
    });
  }

}

When I print the results array in the console, this is what I got:

Array(1)
0: {Ans1: 'A', Ans2: 'C'}
length: 1
[[Prototype]]: Array(0)

as you can see, it is storing all the data in a single index and with the field name which won't do at all.

What I want is just the field data stored in different index in the array so I can use that.

Is that possible?

1 Answers

I don't think you can achieve what you want using template-driven forms.

You would have to use reactive forms and FormArray.

Related