Angular2 select default value not working when ngModel and name attribute is used

Question

<select id="role" name="role" class="form-control" [(ngModel)]="user.role" #role="ngModel" required>
    <option value="" >Select</option>
    <option value="leadAnalyst">Lead Analyst</option>
    <option value="analyst">Analyst</option>
    <option value="assistant">Assistant</option>
</select>

user-create.component.ts

ngOnInit() {
  this.user.role = 'Select';
}

I have tried using above code but its not working.

@Sajeetharan your answer works without error in console if #role="ngModel" is removed. And I need #role="ngModel" for validation purpose — Saroj Maharjan
– Saroj Maharjan, Commented Oct 30, 2017 at 7:19
user: User; defaultStr = string ngOnInit(){ this.user.role = this.defaultStr } SCREENSHOT prnt.sc/h3rub4 doesnt appear on select , Html is same as you used on plunker — Saroj Maharjan
– Saroj Maharjan, Commented Oct 30, 2017 at 7:55

Sajeetharan · Accepted Answer · 2017-10-30 06:09:52Z

1

You need to define user as a object and then assign the value for the role,

export class AppComponent {
  defaultStr = 'Select';
  user = { role: this.defaultStr };

  constructor() { console.clear(); }
  getvalue(){
    console.log(this.user.role);
  }
}

WORKING DEMO

answered Oct 30, 2017 at 6:09

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saroj Maharjan Over a year ago

in my above select I have #role="ngModel" , its for validation purpose. If I add that as you havent added in your working demo. It doesnt work

K K · Accepted Answer · 2017-10-30 06:05:14Z

0

Change your code to :

ngOnInit() {
        this.user.role = '';
    }

answered Oct 30, 2017 at 6:05

K K

18.2k4 gold badges33 silver badges39 bronze badges

Comments

nas · Accepted Answer · 2018-01-04 05:32:12Z

0

For selecting the default value you need to use selected property of angular

 <select id="role" name="role" class="form-control"  #role="ngModel" required>
    <option value="" >Select</option>
    <option value="leadAnalyst" [selected]="'leadAnalyst' == user.role">Lead Analyst</option>
    <option value="analyst" [selected]="'Analyst' == user.role">Analyst</option>
    <option value="assistant" [selected]="'assistant' == user.role">Assistant</option>
</select>

"User.role" should return the role of user in ngOnInit()

edited Jan 4, 2018 at 5:32

nas

2,4778 gold badges43 silver badges80 bronze badges

answered Oct 30, 2017 at 6:24

VIshal Jain

6221 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular2 select default value not working when ngModel and name attribute is used

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related