Angular - Disabling button until all options are selected

Question

I want to disable next button until all the statements are selected, means making selecting an option mandatory. I've tried but I'm stuck on how to enable it after selecting all options? Also, if I go back it shouldn't show disable button. Any help? (SOLVED)

EDIT: My app has now 2 scenarios, 2 different kind of questions.

1st case is mcq type in which only one option is selectable.

2nd case, T/F all option can either be true or false.

The suggested solution works but I want it to be based on questionType not questionNumber. As the latter won't be unique. HTML

<div class="qitem qclose"
                   [ngClass]="{'qclose-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'false')}"
                   (click)="changeFalse(j , item, searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
                <i class="qitembox qclose-icon">F</i>
              </div>
              <div class="qitem qtick"
                   [ngClass]="{'qtick-active': item.selectAnswer?.dirty && (item.selectAnswer?.select == 'true')}"
                   (click)="changeTrue(j , item,searchQuiz.tfQuestionNumber);toggle(searchQuiz.tfQuestionNumber)">
                <i class="qitembox qtick-icon">T</i>
              </div>

TS

setQuestionAnswer(i,option,step,answer){
    console.log(option,i);
    /*Update question status in options array*/ 
    this.QuizData.map(res=>{
      console.log(res.tfQuestionNumber,step);
      if(res.tfQuestionNumber === step){
        res.options.map(res=>{
          if(res.id === option.id){
            res.status = answer;
          }
        })
      }
    });
    /*-----------------------------*/ 
    console.log(this.QuizData);

   /*Calculate total values selected*/ 
    this.totalConditions(option, step);
  /*-----------------------------*/ 
  }

Working demo: https://stackblitz.com/edit/angular-ivy-4yczgp

Answer 1

Simply set the status of each step with boolean value and also add value for your answer status as true or false to options array. You can do this by adding new property of status to QuizData array which contains data from API like this:

this.QuizData.forEach(x=>{
  x['status'] = true;
  x.selectAnswer = { select: '', dirty: '' };
  x.options.map((x, index)=>{
    x['id'] = index;
    x['status'] = null;
  })
})

If you notice, I have added ID property to each field which is used to fetch the answered question and updating its status like this:

  changeTrue(i, option, step) {
    this.setQuestionAnswer(i, option, step, true);

    option.selectAnswer = { select: 'true', dirty: 'true' };
  }


  setQuestionAnswer(i,option,step){
    console.log(option,i);
    /*Update question status in options array*/ 
    this.QuizData.map(res=>{
      console.log(res.tfQuestionNumber,step);
      if(res.tfQuestionNumber === step){ //=====> matching the current step
        res.options.map(res=>{
          if(res.id === option.id){ // =======> matching the current question and setting it to true or false
            res.status = answer;
          }
        })
      }
    });
    /*-----------------------------*/ 
    console.log(this.QuizData);

   /*Calculate total values selected*/ 
    this.totalConditions(option, step);
  /*-----------------------------*/ 
  }

Now to calculate total questions answered

  totalConditions(option,step){
    this.count= 0;
    let len = 0;
    this.QuizData.map(res=>{
      console.log(res.tfQuestionNumber,step);
      if(res.tfQuestionNumber === step){
        len= res.options.length;
        res.options.map(res=>{
          if(res.status !== null){
            this.count = this.count +1;
          }
        })
      }
    });
    if(this.count ===len){  // If all all questions answered then remove disable from button
      this.QuizData.map(res=>{
        if(res.tfQuestionNumber === step){
          res.status = false;  
        }
      });
    }
  }

And it's done. You can go back and forward as you please and the status won't change to disable. Hope it helps :)

Working Example: https://stackblitz.com/edit/angular-ivy-quiz

Scenario 2:

If you have options as MCQs, in that case you can simply add this piece of code to toggle method().

toggle(step) { 
    this.buttonDisabled = false;

    this.QuizData.map(res=>{
      console.log(res.index,step);
      if(res.index === step){
        res.status = false; 
      }
    });
    console.log(this.QuizData); 

}

Working Example: https://stackblitz.com/edit/angular-ivy-quiz-mcqs