I have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown
But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"
HTML IS SHOWN BELOW
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option value="-1" [selected]="isSelected"> Please Select Use Case </option>
<option *ngFor="let uc of useCaseList" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
*HTML i CHANGED TO *
[selected]="1"
But it doesn't made any difference.See the changed HTML Below
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
SAME IN IMAGE
I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:
But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"
TS file
ngOnInit() {
getUsecaseList() {
this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);
}
}
Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?
Remove [selected] from your options.
The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.
I didn't see you using the instruction that makes it default:
value='default'
for instance:
<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>
Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().
Related
I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"
So guys, I have this very simple snippet
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event.target.value)">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
when i make a choice it always shows me the first option as selected. Let's say ngrxMenuItems is an array with [1,2,3,4]. No matter what is the choice you make it will show you only the first option.
What i tried:
- removing (change)="onChooseMenuItem($event.target.value)" and replacing it with (click) event on every row
- trying ngIf options
What I assume it is:
= Some Angular behaviour I am not aware of.
You main problem is here (change)="onChooseMenuItem($event.target.value), the reason being that the target property does not exist on the $event emitted event, you need to handle the value part in the ts method like so
Html
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" (change)="onChooseMenuItem($event)"> <!-- Change the (change) event emitter -->
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
</select>
</div>
Ts
onChooseMenuItem(event: any){
const value = event.target.value;
console.log(value);
}
You do not bind a value from your component to your selection.
So select does not know which values is the actual to select as option.
You must add ngModel to your select:
<select class="form-control" id="exampleFormControlSelect1" [(ngModel)]="select1">
<option selected disabled>Please select a program</option>
<option
style="cursor: pointer"
*ngFor="let menuItem of ngrxMenuItems, let i = index"
value={{i}}
>{{menuItem.type}}
</option>
'select1' is a variable in your component containing the information about the selected option.
I am working on Angular4 i want to show the selected dropdown value in the left side on the same page. i want the output like when selecting a packing type value and press add button the selected value can be moved to the right side portion.
actually, I am new in angular. can anyone help please its a big help form me
my Html Code is
<form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
<div class="form-group">
<label>Packing Type</label>
<select class="form-control" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
</div>
for add button
<input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newForm.value);newForm.reset()" />
</div>
this is my TS Component file
addItems(value: any) {
this.items = new IComboDetails(value.itemcode, value.itemdescription, value.PackingtypeName, value.quantity);
this.stockitems.push(this.items);
}
Here is working example
<select [(ngModel)]="myDropDown" (ngModelChange)="onChangeofmyOptions($event)">
<option value="one">One my value</option>
<option value="two">Two my value</option>
<option value="three">Three my value</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">
.ts
onChangeofOmyptions(newGov) {
console.log(newGov);
}
in your case
<select class="form-control" (ngModelChange)="onChangeofmyOptions($event)" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
</select>
onChangeofOptions(newGov) {
console.log(newGov);
this.myDropDown=newGov;
}
get value to right side
<input type="text" value={{myDropDown}}>
for binding
this.myDropDown=newGov;
I was having some problem when trying to set the default selected value for dropdown using Angular typescript. Here is my code in html:
<div class="row">
<div class="form-group col-md-2">
<strong><label class="form-control-label"
jhiTranslate="staff.department"
for="field_department">Department</label></strong>
</div>
<div class="form-group col-md-4">
<select class="form-control" id="field_department"
name="department" [(ngModel)]="staff.department">
<option [ngValue]="null" selected disabled>
Please select an Option</option>
<option [ngValue]="departmentOption.id === staff.department?.id ?
staff.department : departmentOption"
*ngFor="let departmentOption of departments | orderBy: 'departmentName'">
{{departmentOption.departmentName}}</option>
</select>
</div>
</div>
When I launch the page, by default, the dropdown option for "Please select an Option" supposed to show in the dropdown, however, in my case, it is empty. Any idea why is it so?
Thanks!
You can try setting staff.department=null initially
in ts
ngOnInit() {
this.staff.department=null
}
in html
<select class="form-control" id="field_department" name="department" [(ngModel)]="staff.department">
<option [ngValue]=null disabled>Please select an Option</option>
//rest code
</select>
try <option [ngValue]="undefined" selected disabled>Please select an Option</option>
Try giving "anyvariable that is not defined in typescript" as default value to option
<select class="form-control" id="field_department" name="department"
[(ngModel)]="staff.department">
<option [ngValue]="anythingNotDefinedYet" selected disabled>
Please select an Option</option>
<option [ngValue]="departmentOption.id ===
staff.department?.id ? staff.department : departmentOption"
*ngFor="let departmentOption of departments | orderBy: 'departmentName'">
{{departmentOption.departmentName}}</option>
</select>
Stackblitz Demo showing the case
I have an template, where a service populates the values used in a select box. Like so:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
The above works fine. So I figured, if the array backings only has one item, I might as well have angular auto select the one value that is available (for UI improvement)
So for a basic, hacky proof of concept I tried:
<div *ngIf="backings?.length == 1" class="form-group">
<label for="backings_select">Backing Single</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" selected="selected">{{backing.name}}</option>
</select>
</div>
<div *ngIf="backings?.length > 1" class="form-group">
<label for="backings_select">Backing Multiple</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id">{{backing.name}}</option>
</select>
</div>
Now if backings.length == 1, the following html is rendered:
<option selected="selected" value="1: 1" ng-reflect-ng-value="1">nameValue</option>
And if backings.length > 1 the following html is rendered:
<option value="0: 1" ng-reflect-ng-value="1">nameValue1</option>
<option value="1: 2" ng-reflect-ng-value="2">nameValue2</option>
Now in theory, the above code should work, however when length==1 the html select box is not auto selecting the value with selected="selected". Have I missed anything, or is there any reason why the select is not auto selecting?
use [selected] instead of selected
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
without using ngIf and duplicating your code you can achieve the desired result like this:
<div class="form-group">
<label for="backings_select">Backing</label>
<select class="form-control"
required
name="backings_select"
(ngModelChange)="storeValueRedux($event, count)">
<option *ngFor="let backing of backings" [ngValue]="backing.id" [selected]="backings.length === 1">{{backing.name}}</option>
{{backing.name}}</option>
</select>
</div>