I have following code for my dropdown menu. How can I set a value as selected?
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein">nein</option>
</select>
</div>
I thought it will be selected if I type in the selected keyword? Why does angular not do this?
I think this work for you:
Use selected in the <option> tag
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein" selected>nein</option>
</select>
</div>
Selected is an boolean parameter from the HTML Element select
so you have set it to true for the specific option element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Alternative Solutions:
use selectedHTMLEl.selectedIndex
sets the selected Option by the Index of Option
The selected value is defined by the formControl you bound it to. Once you give the FormControl integrationType a value, this value will be selected. If you set nein as it's value, the 3rd option neinwill be selected.
Example edit value after init
this.myFormGroup.get('integrationType').setValue('nein');
Example with value on init
this.myFormGroup = this.formBuilder.group({
integrationType: ['nein'],
});
Related
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.
<label>Mark All Present:</label>
<input type="checkbox" name="checkall" ng-model="checkall">
<select name="status{{$index}}" ng-model="attendance_data[$index].status" required>
<option value="">Select Status</option>
<option value="Present" data-ng-selected="checkall">Present</option>
<option value="Late">Late</option>
<option value="Absent">Absent</option>
</select>
<span ng-show="submitted && attendance_form.status{{$index}}.$error.required">is Required</span>
On click on checkbox value selected as present,
but at the time of submission it shows is Required.
If i selected value with mouse on by one its working.
Quick look at the ngSelected documentation: Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
You should update your checkbox to set the select model value appropriately on ngChange.
is there any reason why this simple code won't work? I'm trying to have a placeholder on my select, but it simply shows as one of the other options in the list.
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled>{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.denominazione}}</option>
</select>
</div>
I'm using angular4. Thanks.
--EDIT--
I found out that if I delete [(ngModel)]="model[d.name]" all works fine. Any hint?
You have to set the value of the <option> to the value of the model, because the <select> will use the value of the model as the default selection.
When the model is undefined at the beginning you can do it like this:
<option value="undefined">Please choose...</option>
That's how it is supposed to work. With the attributedisabled you can't choose it as an option.
But you could add the hidden attribute to also hide it:
<option value="" selected disabled hidden>{{d.placeholder}}</option>
<select formControlName="value" class="form-control"
style=" height: 40px">
<option [ngValue]="null" selected disabled hidden>Select</option>
<option>Save</option>
<option>Download</option>
</select>
Add this simply it will work.
<option value="" disabled>Select Category</option>
Or
<option [ngValue]="null">Select Category</option>
<div class="form-group">
<label class="col-md-4 control-label" for="is_present">Is Present?</label>
<div class="col-md-4">
<select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === true">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
I have this code in my html component. I receive a boolean data from API, I would like to know what the best way to use *ngIf to add selected in option tag if the API data is true or false.
Slightly change to Rahul's answer, because from what I understand, you are receiving a boolean value that is should not be the same as candidates.is_present. Therefore store the boolean value to a variable, e.g bool, and then just have the [(ngModel)]="bool" in your select:
<select name="is_present" [(ngModel)]="bool" *ngIf="candidates.is_present">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Just use candidates.is_present
<select id="is_present" [(ngModel)]="defaultValue" name="is_present" class="form-control">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
and in TS file,
if(candidates.is_present){
this.defaultValue = 'Yes';
}else
{
this.defaultValue = 'No';
}
as i can understand from question you want to select the value in select box based on some candidates.is_present. So here you need to bind the data using [(ngModel)]="candidates.is_present" ,and be sure to include FormsModule in your imports. we use *ngIf when we want our element to remove/add to dom based on some conditions.hope you got the answer
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>