Angular - Check if all options are selected to enable button

问题

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 should enable.

NOTE:

My functionality of selecting options and choosing correct/wrong is working fine, I just can't figure out how to enable when each single option is selected.

Any help or suggestions? Working demo: https://stackblitz.com/edit/angular-ivy-5qtyxy

buttonDisabled = true;

<button class="btn-next" [disabled]="buttonDisabled">
  Next
</button>

回答1:

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;
}

回答2:

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.

回答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 answer 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

来源：https://stackoverflow.com/questions/62840491/angular-check-if-all-options-are-selected-to-enable-button