Angular - 检查是否选择了所有选项以启用按钮

Question

这是一个测验应用程序，在这种情况下，我的下一个按钮将重定向到另一个页面，默认情况下它是禁用的。如果我选择它应该启用的所有选项。笔记：我选择选项和选择正确/错误的功能工作正常，我只是不知道在选择每个选项时如何启用。有什么帮助或建议吗？工作演示：https ://stackblitz.com/edit/angular-ivy-5qtyxybuttonDisabled = true;<button class="btn-next" [disabled]="buttonDisabled">  Next</button>

Answer 1

我对此的看法是将其定义buttonDisabled为吸气剂，然后评估每个问题的状态是否允许导航到下一页...

在我的实现中，用户必须选择类型 2 问题的所有答案，但只选择类型 1 问题的一个答案。如果这不是您想要的，请在评论中说明，这对我来说是合乎逻辑的。我希望它已经对你有所帮助。

任何问题？问一下。

Answer 2

你可以使用 Object.keys ，像这样

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

答案将起作用，但您可以将其设为此处显示的 Angular 方式：

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

有两种方式：模板驱动或反应式表单

然后您可以将禁用属性绑定到表单有效属性。

选择最适合您需求的产品。希望它会有所帮助。