I'm working on an Angular 8 application that utilizes Angular Material. I have multiple dropdown lists with a button that triggers a function based on the selected values from the dropdowns.
Initially, when the page loads, the button is disabled. However, upon selecting a value from the dropdown list, the button becomes enabled. The issue arises when no value is selected from the dropdown list; the button remains enabled instead of being disabled.
My question is: How can I disable the button when no value is selected from the dropdown list?
This is the TypeScript code snippet:
buttonFilterDisabled: boolean;
selectedSearch: string;
selectedValue: string;
onChange3(event){
this.buttonFilterDisabled = true;
}
<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 here's the button element:
<button [disabled]="!buttonFilterDisabled" mat-raised-button color="accent" class="Button" (click)="searchFor()">
Filter
</button>
In addition to the dropdown lists, there are also radio items accompanied by a date field. Even when the date field is filled in, the button appears disabled. This behavior is incorrect as the button should be enabled when a date is entered.
The radio buttons section:
<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 component:
<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>
Furthermore, I have created a function to handle changes in the selected search options:
setSelectedSearchOptions(optionLabel: string) {
// Function implementation
}
When the 'Inlog' radio button option is selected, the button should be enabled if a date is filled in. However, it currently remains disabled even when a date is provided.