Select Box default value is not showing with [(ngModel)] Angular 2

Question

I am using below snippet in my code. If I am applying variable binding "[(ngModel)]" then my default option i.e. "Title*" is not visible. If i remove it then it behave normally and star showing 1st option by default selected.

 <select name="title" id="title"title="Please select title" [(ngModel)]="title">
                <option value="title" selected>Title*</option>
                <option value="MD">MD</option>
                <option value="RN">RN</option>
                <option value="Mr">Mr</option>
                <option value="Ms">Ms</option>
  </select>

Askance

what is the issue? – Fat

my bad!!! I am using formbuilder and i forgot to add <formControlName="title"> in HTML. Now it's working fine. Thanks – Askance

@Chellappan - my defualt option was not coming as selected and while it was rendering in DOM, It was showing blank in place of default selection. Hope i am able to clear my point. – Askance

Answer 1

property/ngmodel title need to be set in your component's class to the title element that you want to be pre-selected from titles list. Eg:

HTML

<h1>Selection</h1>
<select type="number" [(ngModel)]="title" >
  <option *ngFor="let titl of titles" [ngValue]="titl.name">{{titl.name}}</option>
</select>
{{title}}

Component

export class AppComponent  {
  title:string;
  titles:Array<Object> = [
      {name: "Title*"},
      {name: "MD"},
      {name: "RN"},
      {name: "Mr"},
      {name: "Ms"}
  ];
constructor() {
    //Old Code
   // this.title = this.titles[0]name;

  //New Code
  this.title = this.titles[0]['name'];
  }

}

Demo

Maker

@AmbujKhanna If the answer was helpful please mark it as correct! – Maker

there is an error in your code. ".name" should be write like "['name']" – Askance

Answer 2

You don't even need to use the selected attribute.

Angular does everything for you, the only thing you have to understand is that always the option is selected that has the same value that the primitive has, to which it is bound in the component. Hence the name data-binding.

So if you have let's say a

<select [(ngModel)]="foo" ...

and in the .ts file the component property foo has the value undefined, then if you add the option

<option [ngValue]="undefined" ...

it gets selected by default. If you want, you can also add disabled="disabled" so it acts like a placeholder.

Technology

Perfect explanation. Thanks. Feels like now understood the concept to the point. :) Also, instead of disabled="disabled" , we can directly write disabled , works as a placeholder as well – Changchangaris

Answer 3

Try this.

Give the condition in selected on which scenario the value

" Title" should get selected

 <select name="title" id="title" #title="ngModel" title="Please select title" [(ngModel)]="title">
            <option [selected]="your condition" [value]="title">Title*</option>
            <option value="MD">MD</option>
            <option value="RN">RN</option>
            <option value="Mr">Mr</option>
            <option value="Ms">Ms</option>
 </select>


or try the below code

 <select name="title" id="title" #title="ngModel" title="Please select title" [(ngModel)]="title">
        <option [selected]="true" [ngValue]="title">Title*</option>
        <option value="MD">MD</option>
        <option value="RN">RN</option>
        <option value="Mr">Mr</option>
        <option value="Ms">Ms</option>
</select>

Seda

It works, for me. The same scenario is happen in my project. I added some condition for Selected. Now its working. – Honghonied

Answer 4

For Latest angular use this

//template

 <form [formGroup]="testForm">
    <select formControlName="testControl">
       <option **[ngValue]="null" disabled**>Please choose an option</option>
       <option *ngFor="let option of options" [ngValue]="option.title">
       {{ option.title}}
       </option>
    </select>
</form>

//component

options = [{ id: 1, title: 'title 1' }, { id: 2, title: 'title 2' }];
testForm = new FormGroup({
   testControl: new FormControl(null, Validators.required)
});

Girdler

Answer 5

 <select id="title" title="Please select title" [(ngModel)]="title">
        <option [selected]="true" >Title*</option>
        <option value="MD">MD</option>
        <option value="RN">RN</option>
        <option value="Mr">Mr</option>
        <option value="Ms">Ms</option>
</select>

I simple added this [selected]="true" attribute its worked fine.

Falkner