如何在 Angular 中禁用反应形式的按钮？答案

【问题标题】：How do I disable a button in a reactive form in Angular?如何在 Angular 中禁用反应形式的按钮？
【发布时间】：2020-08-21 23:30:43
【问题描述】：

我正在使用 Angular 10 框架开发一个测验应用程序。我想禁用下一个按钮，直到选择单答案选项和多答案问题选项，然后单击下一步按钮应该启用。当用户试图在没有给出答案的情况下单击下一步按钮时，我希望它会说“请选择一个答案以继续”。我尝试通过添加 [disabled]="true" 来禁用下一个按钮，但它可能应该是 [disabled]="isAnswered"。

请您在 Stackblitz 上查看我的代码：https://stackblitz.com/edit/angular-10-quiz-app。我还在下面附上了我的按钮代码的 sn-p。我不知道该怎么做。请你帮忙解决这个问题。谢谢！

下一个按钮的代码（在 quiz.component.html 中）：

<div class="next-question-nav" *ngIf="question && questionIndex !== totalQuestions">
  <button type="button" mat-flat-button
    (click)="advanceToNextQuestion()"
    (window:keydown.ArrowRight)="advanceToNextQuestion()"
    (window:keydown.Enter)="advanceToNextQuestion()"
    matTooltip="Next Question &raquo;" matTooltipPosition="above" [disabled]="true">
    <svg viewBox="0 0 410.258 410.258">
      <polygon [attr.points]="paging.nextButtonPoints"/>
    </svg>
  </button>
</div>

【问题讨论】：

在 selectedAnswer 方法中设置 isAnswered 为 true 并且 [disabled]='!isAnswered' 并且当前流程可能存在问题，您需要提前将 isAnswered 设置为 false 到 nextquestion() 并将 isAnswered 设置为 true previousQuestion() 方法。这样，您将只剩下一种情况，当您单击上一个问题时，您需要根据问题是否得到回答再次设置 isAnswered

标签： javascript html angular

【解决方案1】：

在你的组件中添加一个方法isAnswered()

  isAnswered(): boolean {
    return this.answers && this.answers.length > 0;
  }

并将其绑定到您的按钮disabled 属性

[disabled]="!isAnswered()"

【讨论】：

是的，谢谢，这行得通！如果用户单击下一步按钮而不单击答案，我想留言，不知道该怎么做。此外，当我将鼠标悬停在下一个按钮上时，工具提示也会消失。
一个问题中的一个问题，请打开一个新问题以获取更多问题。当然，如果您的按钮被禁用，工具提示就会消失。如果您的第一个问题得到解答，请接受并vote。