Angular - Check if all options are selected to enable button

Question

This is a quiz app, in this scenario my next button will redirect to another page and it\'s disabled by default. If I choose all the options it shou

Answer 1

The answers will work, but you can make it the Angular way shown here:

https://angular.io/guide/forms-overview

There are 2 ways: template-driven or reactive forms

Then you can bind disabled property to the form valid property.

Choose what’s suits best to your needs. Hope it will be helpful.

Answer 2

you can use Object.keys for that, like this

App.component.html

<button class="btn-next" [disabled]="isDisabled()">
    Next
  </button>

app.component.ts

isDisabled(): boolean {
  return Object.keys(this.answerEvaluation).length !== Object.keys(this.practiceQuizData).length;
}

Answer 3

My take on this is to define the buttonDisabled as a getter and then evaluate for each question if it's status allows for the navigation to the next page...

In my implementation the user has to select all of the answers of the type-2-questions, but only one answer on the type-1-questions. If this is not what you want please state so in the comments, it's just what appeared logical to me. I hope it helps you already.

Any questions? Just ask.

Here's my stackblitz