Angular - Show Empty Row by Default in Drop Down List and Disable Button

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