时间戳

首页 > 解决方案 > 仅当 Angular 中的条件为真时启用按钮

angular - 仅当 Angular 中的条件为真时启用按钮

问题描述

我试图使按钮仅在将特定范围的值放入单独的输入时才可用，但即使满足正确的条件，它也会保持禁用状态。

这个想法是阻止用户点击按钮，以防他在输入中输入不正确的数据并直接转到按钮 - 在这种情况下，不会提示他应该更正乘客数量。

HTML：

  <input type="number" id="passengers" [(ngModel)]="numberOfPassengers" (change)="checkValue()"> 
  <a routerLink="/summary"> <button [disabled]="checkButton()" (click)="saving()">To summary</button></a>

组件.TS

 ngOnInit() {
   this.buttonDisabled = true
  }

          public numberOfPassengers: number;
          public errorMessage: string = "";
          public errorMessageSubmit: string = ""
          public buttonDisabled: boolean;

      checkButton() {
        if (this.numberOfPassengers <= 0 && this.numberOfPassengers > 9) {
          return true;
        } else {
          return false;
        }
      }

      checkValue() {
        if (this.numberOfPassengers <= 0) {
          this.errorMessage = "Choose at least 1 passenger";
          return (this.numberOfPassengers = 1);
        } else if (this.numberOfPassengers > 9) {
          this.errorMessage = "Maximum of 9 passengers is allowed";
          return (this.numberOfPassengers = 9);
        }
      }

我究竟做错了什么？感谢您的任何建议！

标签： angulartypescriptbuttondisabled-input

解决方案

条件应该是 OR，而不是 AND。numberOfPassengers变量不能同时小于或等于 0 并且大于 9 。它小于或等于 0 或大于 9。

checkButton() {
  if (this.numberOfPassengers <= 0 || this.numberOfPassengers > 9) {
    return true;
  } else {
    return false;
  }
}

但是你不需要这个函数也不需要a标签。您可以在按钮元素中绑定routerLink并直接检查模板中的条件

<button routerLink="/summary" [disabled]="numberOfPassengers <= 0 || numberOfPassengers > 9" (click)="saving()">To summary</button>

推荐阅读