Angular 2 Set begin value of select [duplicate]

Question

This is my select code :

   <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
       <option *ngFor="#p of prototypes" [value]="p.selector">
             {{ p.selectorName }}
       </option>
   </select>

How do I set a standard begin value to this select option I thought i have to set this variable:

 selectedPrototypeSelector: string;

To this: selectedPrototypeSelector: string = "Test";

But the "Test" is not showing first in the select box The begin value is empty, how do I set this for example to: Select your option.

Here a PLUNKER ,

as you can see the select box is empty while i set the value p.selector and the same for the second select where i give the value of constraint:

 <select class="form-control" [(ngModel)]="expression.constraint">
     <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
         {{ constraint }}
     </option>
 </select>

I want to set the begin value of every select box to a static string = "Select an option";

What should be the default value? Where does it come from? A property on the component class or some static string value? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 19, 2016 at 15:46
@GünterZöchbauer it is just a static string value I edited my question — Sireini
– Sireini, Commented Apr 19, 2016 at 15:48

kemsky · Accepted Answer · 2016-04-19 20:30:14Z

1

It should work just fine, see plunkr. You either have non-string value in p.selector or it was typo -> [value]="p.selectorName".

answered Apr 19, 2016 at 20:30

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

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

6 Comments

Sireini Over a year ago

It was not a typo because both of them p.selector and p.selectorName are strings here you see the plunker link to get a better view: plnkr.co/edit/2soqqn?p=preview

kemsky Over a year ago

you must initialize selectedPrototypeSelector but it is never assigned. see plunkr.

Sireini Over a year ago

this works but i want to set it to a string value of "Select an option" take a look at this plunker: plnkr.co/edit/ffT5b8?p=preview

kemsky Over a year ago

Select can only show blank when nothing is selected or show selected option value if option is selected. The only way is to add fake option with text "Select an option". check this answer

Sireini Over a year ago

could you edit this in my plunker?

|

Günter Zöchbauer · Accepted Answer · 2016-05-02 09:46:07Z

1

This works fine with ngValue

<select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
   <option *ngFor="let p of prototypes" [ngValue]="p">
         {{ p.id }}
   </option>
</select>

Just set selectedPrototypeSelector to the value you want to have selected.

Plunker example

edited May 2, 2016 at 9:46

answered Apr 19, 2016 at 15:44

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

6 Comments

Sireini Over a year ago

It does not work here a plunker link: plnkr.co/edit/2soqqn?p=preview It throws me this error: EXCEPTION: Template parse errors: Can't bind to 'ngValue' since it isn't a known native property

Günter Zöchbauer Over a year ago

I can't reproduce but I also couldn't find ngValue being used. The error might be caused by using beta.14 instead of beta.15 (ngValue) was introduced very recently. (just change all .14 to .15 in index.html

Sireini Over a year ago

Hmm it can not read the property [1]: plnkr.co/edit/kUDkD9?p=preview

Günter Zöchbauer Over a year ago

You need to move the code from the constructor to ngOnInit(). Inputs aren't yet set when the constructor is executed. plnkr.co/edit/Q53Q9L?p=preview

Sireini Over a year ago

That works only it throws errors for the ngModelChange I think it is a better plan to just set it like this: this.selectedPrototypeSelector = "Select option"; how do I set that?

|

Collectives™ on Stack Overflow

Angular 2 Set begin value of select [duplicate]

2 Answers 2

6 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Linked

Related