如果月份无效，则启用/禁用按钮答案

【问题标题】：Enable/Disable button if the months are invalid如果月份无效，则启用/禁用按钮
【发布时间】：2020-09-19 12:25:51
【问题描述】：

我正在尝试为月/年创建导航。

如果用户在Jan 月份，我想禁用left 箭头导航按钮，如果用户在Dec 月份，我想禁用右导航按钮。

下面是我的代码

  ngOnInit() {
    this.year = new Date().getFullYear();
    this.monthIndex = new Date().getMonth();
  }

浏览月份

如果“flag”为0，表示用户点击左箭头键
如果“flag”为1，表示用户点击右箭头键->

下面是我的代码，

  navigationArrowMonth(flag) {
    this.monthNavigatorValidation(flag)
  }

  monthNavigatorValidation(flag?) {
    if(flag) {
      if(this.monthIndex < 0 || this.monthIndex >= 11) {
        this.isRightMonthDisabled = true;
        return false;
      } else {
        this.monthIndex = this.monthIndex + 1;
        this.isRightMonthDisabled = false;
        return true;
      }
    } else {
      if(this.monthIndex < 0 || this.monthIndex <= 11) { 
        this.isLeftMonthDisabled = true;
        return false;
      } else {
        this.monthIndex = this.monthIndex - 1;
        this.isLeftMonthDisabled = false;
        return true; 
      }

    }
  }

HTML 模板

 <!--Month navigation-->

                <!-- 
                    On click should call navigationArrowMonth
                -->
                <button [disabled]="isLeftMonthDisabled" (click)="navigationArrowMonth(0)" mat-icon-button id="leftMonthKey" aria-label="left naviage">
                    <mat-icon>keyboard_arrow_left
                    </mat-icon>
                </button>

                <div id="monthValue" class="nameArrage" style="width: 120px;">
                    <!-- 
                        Display month in Alphabets
                    -->
                    {{months[monthIndex]}}
                </div>

                <!-- 
                    On click should call navigationArrowMonth
                    disable when limit reached
                -->
                <button [disabled]="isRightMonthDisabled" (click)="navigationArrowMonth(1)" mat-icon-button id="rightMonthKey" aria-label="right naviage">
                    <mat-icon>keyboard_arrow_right
                    </mat-icon>
                </button>

                <!--Month navigation end-->

但我的代码没有按预期工作，

我在这里做错了什么？

【问题讨论】：

您在哪里使用此代码添加模板代码以获得更好的想法。
更新了我的问题
monthNavigatorValidation(flag) 正在返回一个布尔值，尽量不要返回真或假值，尤其是您使用 isLeftMonthDisabled 和 isRightMonthDisabled 禁用按钮

标签： javascript angular typescript

【解决方案1】：

这个更简单的解决方案

app.component.html
<h2>{{monthIndex}}</h2>

<div>
  <button 
    type="button" 
    [disabled]="monthIndex <= 0"
    (click)="onMove(-1)"
    >
    LEFT
  </button>
  <button 
    type="button" 
    [disabled]="monthIndex >= 11"
    (click)="onMove(1)"
    >
    RIGHT
  </button>
</div>

app.component.ts
year: number;
  monthIndex: number;


  ngOnInit() {
    this.year = new Date().getFullYear();
    this.monthIndex = new Date().getMonth();
  }

  onMove(move: number): void {
    this.monthIndex += move;
  }

【讨论】：

这工作正常，但我希望monthNavigatorValidation 返回真/假，以便在月份超出范围时执行其他操作
你可以将你的逻辑实现到 onMove 方法 onMove(move: number): boolean { this.monthIndex += move; //你的逻辑 }
@hiremedroptaxiTaxi 你应该探索和使用 Angular 对表单验证的原生支持。以编程方式编写所有内容（而不是利用框架）很快就会导致意大利面条式代码。 angular.io/guide/form-validation

【解决方案2】：

有很多最好的方法，但是由于您正在使用这种逻辑处理其他事情，因此我修复了您的解决方案，请尝试一下。

  monthNavigatorValidation(flag) {
    if(flag) {
      this.isLeftMonthDisabled = false;
      this.monthIndex = this.monthIndex + 1; 
     if(this.monthIndex === 12) {
      this.isRightMonthDisabled = true;
      return false;
     } else {
      return true;
     }
   } else {
     this.isRightMonthDisabled = false;
     this.monthIndex = this.monthIndex - 1;

    if(this.monthIndex === 1) { 
     this.isLeftMonthDisabled = true;
     return false;
    } else {
     return true; 
   }
  }
}

【讨论】：

【解决方案3】：

您没有在每次移动时都验证两个按钮，并且您的条件存在错误。

要修复您的代码，请创建一个仅负责导航的函数。
至于验证单独做一个函数或者直接使用*disabled指令，就这样：

左月键

[disabled]="monthIndex === 0"

右月键

[disabled]="monthIndex === 11"

【讨论】：

【解决方案4】：

~~你试过去掉'?'在monthNavigatorValidation(flag?)的函数参数之后？在我看来，这应该是一个语法错误。~~

【讨论】：

这是可选参数的 TypeScript 表示法：typescriptlang.org/docs/handbook/functions.html

【解决方案5】：

请尝试这样写禁用，

 [attr.disabled]="monthIndex === 0 ? true : null"

在您的 Html 标签中。

【讨论】：