Question

我有一个使用Angular材质的Angular 8应用程序，并且我有一些下拉列表，其中的按钮会根据下拉列表触发功能。

因此，如果页面已加载，则该按钮将被禁用。但是，如果您从下拉列表中选择一个值，则会启用该按钮。但是，如果我随后从下拉列表中没有选择任何值，则该按钮保持启用状态。并没有被禁用。

所以我的问题是：当从下拉列表中未选择任何值时如何禁用按钮？

这是ts代码：


buttonFilterDisabled: boolean;

  selectedSearch: string;
  selectedValue: string;



onChange3(event){
  this.buttonFilterDisabled = true;
  //this.selectedValue = undefined;

}

<div class="search-select searchstatus" *ngIf="selectedSearch && hasStatusOptions(selectedSearch)">
        <mat-select
          placeholder="Status"
          name="option"
          [(ngModel)]="selectedValue"
          (filterparticipantByRegistration)="enableSubmit($event)"
          (ngModelChange)="onChange3($event)"
        >
          <mat-option value="">--Selecteer een status--</mat-option>
          <mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">
            {{ option.status }}
          </mat-option>
        </mat-select>
      </div>

和按钮：

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

谢谢

但是问题更大。因为我还有其他广播节目。只是约会。现在，该按钮也被禁用。不必是什么。因为填写了日期字段：

单选按钮：

<div class="search-types">
      <mat-radio-group>
        <mat-radio-button
          *ngFor="let option of searchOptions"
          [value]="option"
          (change)="setSelectedSearchOptions(option.label)"
        >
          {{ option.label }}
        </mat-radio-button>
      </mat-radio-group>
    </div>

和日期选择器：

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

所以我有这个功能：

 setSelectedSearchOptions(optionLabel: string) {
    this.selectedSearch = optionLabel;

    if (optionLabel === 'QrCode') {
      this.showDropdownChallenge = true;
      this.showDropdownQrCode = false;
      this.showDropdownVcheqCode = false;
    }

    if (optionLabel === 'Doelen') {
      this.showDropdownQrCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
    }

    if (optionLabel === 'Chat') {
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownQrCode = false;

    }
    if (optionLabel === 'Inlog') {
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
      this.showDropdownQrCode = false;
    }

    if (optionLabel === 'Registratie') {
      this.selectedValue = '';
      this.showDropdownChallenge = false;
      this.showDropdownVcheqCode = false;
    }

    if (optionLabel === 'Vcheq') {
      this.showDropdownVcheqCode = true;
      this.showDropdownChallenge = false;
      this.showDropdownQrCode = false;
    }
  }

并且当选择单选按钮选项Inlog时，则必须在填写日期后启用该按钮。但是现在它保持禁用状态。

Answer 1

添加[disabled]="!selectedValue"将解决问题

Answer 2

您没有在 onChange3 方法中检查该值。您可以像这样

onChange3(event){
  this.buttonFilterDisabled = (this.selectedValue !== '');
}

请不要在方法中添加数字，请遵循术语。

您也可以直接通过

[disabled]="!selectedValue"

Answer 3

您可以删除更改事件和变量buttonFilterDisabled

<div class="search-select searchstatus" *ngIf="selectedSearch && hasStatusOptions(selectedSearch)">
        <mat-select
          placeholder="Status"
          name="option"
          [(ngModel)]="selectedValue"
          (filterparticipantByRegistration)="enableSubmit($event)"
          (ngModelChange)="onChange3($event)" //<< Remove this line
        >
          <mat-option value="">--Selecteer een status--</mat-option>
          <mat-option *ngFor="let option of getStatusOptions(selectedSearch)" [value]="option.apiStatus">
            {{ option.status }}
          </mat-option>
        </mat-select>
</div>

您的按钮可能会变得简单：

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

在下拉菜单中未选择任何项目时如何禁用按钮

3 个答案: