仅在条件为真时启用按钮

Question

我试图仅在将一定范围的值输入到单独的输入中时使按钮可用，但是即使满足正确的条件，该按钮也保持禁用状态。

想法是阻止用户单击按钮，以防他在输入中输入了不正确的数据并直接进入按钮-在这种情况下，不会提示他应该校正乘客人数。

HTML：

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

COMPONENT.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);
        }
      }

我在做什么错？感谢您的任何建议！

Answer 1

条件应该是OR，而不是AND。

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

但是您不需要此功能。您可以直接签入模板

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