Как отключить кнопку, когда в dropdwonlist не выбран ни один элемент

Question

У меня есть приложение 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

вы можете удалить событие изменения и переменную 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>

Answer 3

вы не проверяете значение в методе onChange3 . Вы можете проверить там вот так

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

Пожалуйста, не добавляйте номера в методах, следуйте номенклатуре.

Также вы можете напрямую сделать это этим

[disabled]="!selectedValue"