Angular 9: How to remove empty option from select
As the initial item you want selected in your template has a value of null
then you need to also assign null
to the value of the field bound to the field's ngModel
.
- This is not the same as using undefined, this will yield en empty value in the select element.
- If you have a value assigned that is not contained as a possible option then the displayed option will also be empty/blank. Example: You have a range from 1 to 5 but the current value of
selectedValue
is 6.
app.component.ts
export class AppComponent {
selectedValue: number = null;
selectedValue2: number;
}
app.html
<h3>Example with an assignment to null<h3>
<select aria-labelledby="dropdownMenuButton" [(ngModel)]="selectedValue">
<option [ngValue]="null">Show All</option>
<option [ngValue]="1">One</option>
<option [ngValue]="2">Two</option>
</select>
<h3>Example with no assignment to null<h3>
<select aria-labelledby="dropdownMenuButton" [(ngModel)]="selectedValue2">
<option [ngValue]="null">Show All</option>
<option [ngValue]="1">One</option>
<option [ngValue]="2">Two</option>
</select>
See also a working stackblitz example.
Angular- Disable button till dropdown option is selected
You need to call on changeEvent
whenever an option is selected or text field is changed
For option selected
<mat-select
[(ngModel)]="entity.code"
(selectionChange)="onChangeValue($event)"
required
>
for text area you also need to bind the value to ngModel
like this
<textarea
[(ngModel)]="entity.value"
(change)="isDisabled()"
style="height: 2rem"
class="pl-5"
></textarea>
and the buttons you want to disable you need to add disable property like this
<button
class="form-control"
(click)="addNewLanguage()"
[disabled]="isDisabled()"
>
Add new language
</button>
<button class="form-control ml-4" [disabled]="isDisabled()">
Save Changes
</button>
and in ts file you need to do this
onChangeValue() {
this.isDisabled();
}
isDisabled() {
return this.rows.filter((item) => item.value == '' || item.code == '')
.length > 0
? true
: false;
}
you will see both are calling the same function on event change
here is the stackblitz just for demo cahnge it as your ease https://stackblitz.com/edit/angular-mat-select-example-decme7
Angular - Show or Hide based on Dropdown list value
Here I've used ngModel in the dropdown so, that you can get the value which you've selected from the dropdown.
<div class="col-md-12 no-padding">
<label>Reply Type</label>
<select class="form-control select2" formControlName="replytype" type="text" style="width: 100%;" [(ngModel)]="optionValue">
<option value="predefined">Predefined</option>
<option value="opentype" selected>Open Type</option>
</select>
</div>
and in Ts file, you need to declare one variable called optionValue like this:
`optionValue`;
and now you can use ngIf for show/hide Divs.
Div1
<ng-container *ngIf="optionValue == 'predefined'>
<div class="col-md-12 no-padding">
<label>Application Name</label>
<input type="text" formControlName="applicationname" class="form-control" id="applicationname" placeholder="Application Name">
<span class="text-danger" *ngIf="form.controls['applicationname'].touched && form.controls['applicationname'].hasError('required')">
Application Name is required! </span>
</div>
</ng-container>
Div2
<ng-container *ngIf="optionValue == 'opentype'"
<div class="col-md-12 no-padding">
<label>Main Menu</label>
<input type="text"class="form-control" id="mainmenu" placeholder="Message Text">
</div>
</ng-container>
default select option as blank
Maybe this will be helpful
<select>
<option disabled selected value> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
Related Topics
Provide an Image for Whatsapp Link Sharing
Disable Blue Highlight When Touch/Press Object With Cursor:Pointer
Open an Exe File Through a Link in a HTML File
How to Vertically Align Text in Input Type="Text"
How to Change Pressed Item Background Color in Ion-List on Ionic
100Vh Height When Address Bar Is Shown - Chrome Mobile
How to Center a "Position: Absolute" Element
How to Overlay One Div Over Another Div
How to Remove Blue Highlight on Hover in Select, Option Inputs HTML for Chrome
How to Playback Mkv Video in Web Browser
Fixed Position Relative to Parent Container
Print Header/Footer on All Pages (Print Mode)
Make Div (Height) Occupy Parent Remaining Height
Change Default Text in Input Type="File"