Set the default value for an HTML <select> element in angular2

Question

How can I set the default value for an HTML element in angular2? The simplest way to go would be my following attempt. This does not work yet, could somebody help me please?

// extract from template
<div class="form-group">
  <label for="status">Status: </label>
  <select class="form-control" name="status" #status="ngModel" [(ngModel)]="statusValueToSet" required>
    <option selected disabled>Choose here</option>
    <option *ngFor="let status of statuses" [value]="status">{{status}}
    </option>
  </select>
</div>

// in the component class  
statuses:string[] = ["New", "Accepted", "Invalid"];

Does giving a value to statusValueToSet beforehand not help? — Harry Ninh
– Harry Ninh, Commented Jul 19, 2016 at 10:02

Maximilian Riegler · Accepted Answer · 2016-07-19 12:19:47Z

3

Just initialize statusValueToSet in your class body, but leave the Choose here option in the select:

// extract from template
<div class="form-group">
  <label for="status">Status: </label>
  <select class="form-control" name="status" #status="ngModel" [(ngModel)]="statusValueToSet" required>
    <option [value]="''">Choose here</option>
    <option *ngFor="let status of statuses" [value]="status">{{status}}
    </option>
  </select>
</div>

statuses: string[] = ["New", "Accepted", "Invalid"];
statusValueToSet: string = "";

edited Jul 19, 2016 at 12:19

answered Jul 19, 2016 at 10:04

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

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

2 Comments

Johannes Over a year ago

Thank you very much. The problem is now, that the initial value 'default' is already a valid form. Any idea for a quick fix?

Maximilian Riegler Over a year ago

I think I found something - just using an empty string as value seems to invalidate it.

Collectives™ on Stack Overflow

Set the default value for an HTML <select> element in angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related