javascript - 如果没有从日期选择器材料中选择日期，则禁用按钮

Question

我在 Material Angular 中有一个按钮和一个 Datepicker。该按钮默认禁用，因为用户必须从日期选择器中选择日期。但是，即使选择了日期，该按钮也将保持禁用状态。

datepicker 的模板如下所示：

  <div>
      <mat-form-field class="search-field-input md-datepicker-input-container">
        <input
          matInput
          readonly
          required
          [matDatepicker]="picker1"
          placeholder="start datum"
          [(ngModel)]="startDate"
          (ngModelChange)="onChange($event)"
        />
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
    </div>

按钮如下所示：

  <button
        [disabled]=" !buttonFilterDisabled || !startDate "
        mat-raised-button
        color="accent"
        class="Button"
        (click)="searchFor()"
      >
        Filter
      </button>

onchange 看起来像这样：

  onChange() {
    this.buttonFilterDisabled = true;
  }

所以我的问题是：从日期选择器中选择有效日期时如何启用按钮？

谢谢

标签： javascriptangulardatepickerangular-material

Answer 1

尝试使用&&运算符而不是||：

<button
    [disabled]=" !buttonFilterDisabled && !startDate "
    mat-raised-button
    color="accent"
    class="Button"
    (click)="searchFor()"
  >
    Filter
  </button>

正如 MDN 所说：

逻辑与 (&&) expr1 && expr2 如果 expr1 可以转换为 true，则返回 expr2；否则，返回 expr1。