I am working on exam portal using angular and spring boot, I got a problem here when i am using name as [name]

Question

Component.html

   <div class="bootstrap-wrapper" *ngIf="!isSubmit">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <!-- instructions -->
                <h2>Instructions</h2>
            </div>
            <div class="col-md-8">
                <!-- questions -->
                <ng-container *ngIf="questions">
                    <h2>{{questions[0].quiz.title}}</h2>

                </ng-container>
                <mat-card *ngFor="let q of questions, let i= index" class="mt20">

                    <mat-card-content>
                        <p> Q {{i+1}}) <span [innerHTML]="q.content"></span> </p>
                      
                        <mat-divider></mat-divider>
                        <div class="row mt20" >
                            <div class="col-md-6">
                                <input  type="radio" [value]="q.option1" 
                                    [name]="i"
                                       // this is where i am getting error
                                [(ngModel)] ="q.givenAnswer"
                                />
                                {{q.option1}}
                                {{i}}

                            </div>
                            <div class="col-md-6">
                                <input  type="radio" [value]="q.option2" 
                                 [name]="i"
                                  // this is where i am getting error
                                [(ngModel)] ="q.givenAnswer"
                               />
                                {{q.option2}}
                                {{i}}
                            </div>
                        </div>
                        <div class="row mt20">
                            <div class="col-md-6">
                                <input  type="radio" [value]="q.option3" 
                                   // this is where i am getting error
                                 [name]="i"
                                [(ngModel)] ="q.givenAnswer"
                               />
                                {{q.option3}}
                                {{i}}
                            </div>
                            <div class="col-md-6">
                                <input  
                                type="radio" 
                                [value]="q.option4" 
                                 // this is where i am getting error
                                [name]="i"
                                [(ngModel)] ="q.givenAnswer"
                                />
                                {{q.option4}}
                                {{i}}
                            </div>
                        </div>
                    </mat-card-content>

                </mat-card>
                <div class="container text-center mt20">
                    <button (click)="submitQuiz()" mat-raised-button color="accent">Submit 
       Quiz</button>
                </div>

            </div>
            <div class="col-md-2">

            </div>
        </div>
    </div>
    </div>

    <!-- Show Result -->
    <div class="bootstrap-wrapper" *ngIf="isSubmit">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <mat-card>
                <mat-card-header>
                    <mat-card-title>
                        <h1 class="text-center mall">Quiz Result</h1>
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <h1>Marks Obtained: {{marksGot}}</h1>
                    <h1>Correct Ansers: {{correctAnswers}}</h1>
                    <h1>Questions Attempted: {{attempted}}</h1>
                </mat-card-content>
                <mat-card-actions>
                    <button mat-raised-button color="accent">Print</button>
                    <button mat-raised-button color="accent" [routerLink]="'/user- 
       dashboard/0'">Home</button>
                </mat-card-actions>
            </mat-card>
        </div>
    </div>
    </div>

Component.ts

    import { LocationStrategy } from '@angular/common';
    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    import { QuestionService } from 'src/app/services/question.service';
    import Swal from 'sweetalert2';

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

    qid;
    questions;
    marksGot = 0;
    correctAnswers = 0; 
    attempted = 0;

    isSubmit = false;

    constructor(private locationSt: LocationStrategy, private _route: ActivatedRoute, private 
    _question: QuestionService) { }

    ngOnInit(): void {

    this.preventBackButton();
    this.qid = this._route.snapshot.params['qid'];
    this.loadQuestions();
    }

    loadQuestions() {
    this._question.getQuestionsOfQuizForTest(this.qid).subscribe(
      (data: any) => {
        this.questions = data;

        this.questions.forEach((q) => {
          q['givenAnswer'] = '';
        });
        console.log(data);

      },
      (error) => {
        Swal.fire('Error', 'Error in loading questions of quiz', 'error');
      }
       );
    }

    preventBackButton() {
    history.pushState(null, null, location.href);
    this.locationSt.onPopState(() => {
      history.pushState(null, null, location.href);
    })
    }

    submitQuiz() {
    Swal.fire({
      title: 'Do you want to Submit quiz?',
      showCancelButton: true,
      confirmButtonText: 'Submit Quiz',
      icon: 'info',
    }).then((e) => {
      if (e.isConfirmed) {
        //calculation
        this.isSubmit=true;
        this.questions.forEach((q) => {
          if (q.givenAnswer == q.answer) {
            this.correctAnswers++;
            let marksSingle = this.questions[0].quiz.maxMarks / this.questions.length;
            this.marksGot += marksSingle;
          }

          if (q.givenAnswer.trim() != '') {
            this.attempted++;
          }
        });
        console.log("Correct Answers " + this.correctAnswers);
      }
    })
     }
   }

enter image description here

When i am name as [name] it is showing number is not assignable to type String and when i am using name it is compiling successfully but i have three questions in a quiz and while selecting an option of a particular question other options of other questions are getting deselected. what to do?
Thanks in Advance

Answer 1

[(ngModel)]="q.givenAnswer" type="radio" [value]="q.option1" name={{i}}