1

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";

Sireini
  • 4,142
  • 12
  • 52
  • 91

2 Answers2

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

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • It does not work here a plunker link: https://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` – Sireini Apr 20 '16 at 07:20
  • 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` – Günter Zöchbauer Apr 20 '16 at 07:23
  • Hmm it can not read the property [1]: https://plnkr.co/edit/kUDkD9?p=preview – Sireini Apr 20 '16 at 07:32
  • You need to move the code from the constructor to `ngOnInit()`. Inputs aren't yet set when the constructor is executed. https://plnkr.co/edit/Q53Q9L?p=preview – Günter Zöchbauer Apr 20 '16 at 07:35
  • 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? – Sireini Apr 20 '16 at 07:39
  • because i change the template depending on the `prototype.selector` How do i set it statically to `Select option` – Sireini Apr 20 '16 at 08:00
1

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

kemsky
  • 14,727
  • 3
  • 32
  • 51
  • 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: https://plnkr.co/edit/2soqqn?p=preview – Sireini Apr 20 '16 at 07:21
  • you must initialize `selectedPrototypeSelector` but it is never assigned. see [plunkr](https://plnkr.co/edit/m0kGpG3wQ4NEcrmb00yC?p=preview). – kemsky Apr 20 '16 at 08:54
  • this works but i want to set it to a string value of "Select an option" take a look at this plunker: https://plnkr.co/edit/ffT5b8?p=preview – Sireini Apr 20 '16 at 11:48
  • 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](http://stackoverflow.com/a/36632069/491265.) – kemsky Apr 20 '16 at 12:08
  • could you edit this in my plunker? – Sireini Apr 20 '16 at 13:02
  • Because the second one is expression.constraint I tried it like this: https://plnkr.co/edit/zZrGsl?p=preview – Sireini Apr 20 '16 at 13:07