Select box not showing the selected option first

Question

I am using angular 6 and i am unable to display the selected option as default in select box,

HTML consists,

<select class="form-control selectBox" name="username" #username="ngModel" required ngModel>
<option disabled selected>Select User Name</option>
<option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
</select>

Ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  userList: any = [
    {
      "name" : "Test User"
    },
    {
      "name" : "Hello World"
    },
    {
      "name" : "User Three"
    }
  ]
}

It is showing empty value as default inside the select box.

How can i show the selected option as default inside the select box which from the line?

<option disabled selected>Select User Name</option>

Stackblitz:https://stackblitz.com/edit/angular-wfjmlm

Solution 1

You need to set a value in select box like this:

<option disabled selected value="">Select User Name</option>

Will make it work.

Solution 2

the solution can be found in as follows following was html

<select class="form-control selectBox" name="username" [(ngModel)]="selected" required>
 <option disabled selected>Select User Name</option>
 <option *ngFor="let user of userList" >{{user.name }}</option>
</select>
<hr>   {{selected}}

following was the controller

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  userList: any = [
    {
      "name": "Test User"
    },
    {
      "name": "Hello World"
    },
    {
      "name": "User Three"
    }
  ];
  selected = 'Select User Name';
}

stackblitz

Solution 3

ReactiveForms

I pretty much suggest using ReactiveForms. In this way you will have a cleaner code as well as more powerful options.

first import ReactiveForms to your app.module:

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
...
   imports: [
      ...
      ReactiveFormsModule
      ...
   ]

Then in your controller:

myForm: FormGroup;
constructor(private fb: FormBuilder){
    this.myForm = this.fb.group({
          username: null
      })
}

And in your template:

<form [formGroup]="myForm">
   <select formControlName="username" placeholder="Select Username">
        <option disabled selected>Select User Name</option>
        <option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
  </select>

Solution 4

add [value]=""

<option disabled [value]="" selected>Select User Name</option>

and if you want to hide disable option then add hidden attribute

<option hidden disabled [value]="" selected>Select User Name</option>

View more solutions

Comments

[ConnorsFan]

Do you need ngModel? It works without it. See this stackblitz.

[Maniraj Murugan]

@ConnorsFan, I do need ngModel ..value=" " worked for me....

[Reinstate Monica Cellio]

They can fix what they have. There's no need to introduce even more libraries.

[PierBJX]

It's a solution like another don't need to downvote ^^ Depending what you want and the style as well

[Reinstate Monica Cellio]

I consider telling someone to use a library to solve a simple problem as a bad answer. It's like buying a new car because your headlights in your current car need replacing - it's overkill.

[PierBJX]

As I said, it also provides implemented style. It was also because he used angular so in my opinion it could be good to implement angular material or primeNG for example but whatever ahah

[Reinstate Monica Cellio]

Don't take it personally. I consider it bad advice so I have to downvote it. Keep answering questions and don't take things to heart - we all get downvoted sometimes :)