CODEWITHSUNDEEP
angulartypescriptdrop-down-menuangular-material
mightycode Newton
mightycode Newton

Reputation: 3949

How to disable button when no item is selected in dropdwonlist

I have a Angular 8 application with angular material and I have some dropdownlists with a button that triggers a function depending on the dropdownlists.

So if the page is loaded the button is disabled. But if you select a value from the dropdownlist then the button is enabled. But if I then select no value from the dropdownlist the button stays enabled. And not disabled.

So my question is: how to disable the button when no value is selected from the dropdownlist?

THis is the ts code:


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>

and the button:

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

Thank you

But the problem is bigger. Because I also have other radio items. With just a date. And now also there the button is disabled. What not has to be. Because the date field is filled in:

The radio buttons:

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

and the 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)="onChange3($event)"
        />
        <mat-datepicker-toggle matSuffix [for]="picker1" ></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
    </div>

So I have this function:

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

And when the radio button option Inlog is selected, then the button has to be enabled when date is filled in. But now it stays disabled.

Upvotes: 1

Views: 3075

Answers (3)

The Fabio
The Fabio

Reputation: 6250

you can remove the change event and the variable 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>

and your button could become a simple:

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

Upvotes: 0

sibabrat swain
sibabrat swain

Reputation: 1368

you are not checking the value in onChange3 method. You can check there like this 

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

Please don't add numbers in methods, follow the nomenclatures.

Also you can directly do it by this 

[disabled]="!selectedValue"

Upvotes: 0

sa_n__u
sa_n__u

Reputation: 336

Adding [disabled]="!selectedValue" will solve the issue

Upvotes: 3

Related Questions