I can't seem to work out how to easily set a value as the default value for a select dropdown list.
My current code
<select class="form-control" ngControl="modID" #modID="ngForm">
<option *ngFor="let module of modules" [value]="module._id">{{module.moduleName}}</option>
</select>
i have tried playing with the [selected] decorator but cannot work out how to get it to work.
given i have this modInst json object below:
{
"_id": 5,
"semester": "Tri 3",
"year": 2018,
"__v": 0,
"modID": [
{
"_id": 6,
"moduleLeader": "Jake Groves",
"moduleName": "Software Implementation",
"__v": 0
}
]
},
i would like the modInst.modID[0]._id to be selected from all the modules._id (modules) is whats populating the select list
any easy way of doing this?
edit:
i've tried adding [selected]="module._id == modInst.modID[0]._id"
but i get no success on it making it the selected value
i've also tried [ngValue]="modInst.modID[0]._id"
and it still doesn't select the module with id 6 in the list
one last addition ... i've tried a manual 'selected' and it still does not make a selected value upon load [selected]="module._id == '7'"
In reactive form we can use setValue and patchValue of FormGroup and in template-driven form we can use ngModel to set value in select box dynamically. We can also use 'selected' attribute in <option> tag of select element to set default value selected in select box.
Use ngValue and option element to set default value in dropdown list. You can set default value in dropdown list using ngValue directive and by hard-coding option element as shown in the example below. Let us set default text like “Select User” and disable it from user selecting that option.
The default value of the select element can be set by using the 'selected' attribute on the required option. This is a boolean attribute. The option that is having the 'selected' attribute will be displayed by default on the dropdown list.
You can do this: <select class='form-control' (change)="ChangingValue($event)" [value]='46'> <option value='47'>47</option> <option value='46'>46</option> <option value='45'>45</option> </select> // Note: You can set the value of select only from options tag.
You can use [(ngModel)] to do this.
<select [(ngModel)]="selectedModule">
<option *ngFor="let module of modules" [value]="module._id"> {{module.moduleName}}/option>
</select>
For example
import { Component } from '@angular/core';
@Component({
selector: 'awesome-component',
template: `
<select [(ngModel)]="selectedModule">
<option *ngFor="let module of modules" [value]="module._id"> {{module.moduleName}}/option>
</select>
`
})
export class AwesomeComponent {
modules: any[];
selectedModule: any = null;
loadModules(){
//load you modules set selectedModule to the on with the
//id of modInst.modID[0]._id you can either loop or use .filter to find it.
}
}
Where you load the models from JSON in your component create a variable for the selectedModule and set the value equal to the module with the matching ID. See this answer here for an example of how to use ngModel on a select input:
Binding select element to object in Angular 2
Also selectedModule will reflect the value of the currently selected item if you need to enable / disable inputs etc based on a selection.
Plunker example
[value] works since the original question is using a number/string id. However if you want to use other types such as an object you should use [ngValue].
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With