CODEWITHSUNDEEP
angulartypescriptangular4-forms
Ambuj Khanna
Ambuj Khanna

Reputation: 1219

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

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>

Upvotes: 7

Views: 19294

Answers (5)

Alok Kumar Sahoo
Alok Kumar Sahoo

Reputation: 551

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

Upvotes: 0

tom
tom

Reputation: 2357

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.

Upvotes: 7

sreejith v s
sreejith v s

Reputation: 1334

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)
});

Upvotes: 1

Keshan Nageswaran
Keshan Nageswaran

Reputation: 8178

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

Upvotes: 8

keerthi
keerthi

Reputation: 158

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>

Upvotes: 5

Related Questions