Question

我在Material Angular中有一个按钮和一个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;
  }

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

谢谢

Answer 1

尝试使用&&运算符代替||：

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

As MDN says:

逻辑与（&&）expr1 && expr2如果expr1可以转换为true，返回expr2;否则，返回expr1。

如果未从日期选择器材料中选择日期，则禁用按钮

1 个答案: