javascript - 如果未从日期选择器 Material 中选择日期，则禁用按钮

Question

我在 Material Angular 中有一个按钮和一个日期选择器。默认情况下该按钮处于禁用状态，因为用户必须从日期选择器中选取日期。但即使选择了日期，该按钮仍处于禁用状态。

日期选择器的模板如下所示:

  <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;
  }

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

谢谢

Answer 1

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

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

As MDN says:

Logical AND (&&) expr1 && expr2 If expr1 can be converted to true, returns expr2; else, returns expr1.