Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular 2 select options default value

Tags:

angular

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'"

like image 704
Jezyk Danzowki Avatar asked Jul 30 '16 22:07

Jezyk Danzowki


People also ask

How to set default value in Angular select?

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.

How to get default selected value of dropdown in Angular?

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.

How do I set the default option in select?

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.

How do I select a default dropdown in angular 6?

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.


1 Answers

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].

like image 161
kmcnamee Avatar answered Oct 06 '22 01:10

kmcnamee