sui select option how to show text e.g <option value="one"> NameOne</option>

[irfanmayo0786]

<option value="one"> NameOne</option>
All thing working with sui select only thing i want to know how i can show. "Name One"
how to put NameOne in options?...

[irfanmayo0786]

can any one tell me how to show NameOne instead of value in drop down selection?..

[trevordaniels]

check out the docs page which shows how to use labelField or templates to achieve this

https://edcarroll.github.io/ng2-semantic-ui/#/modules/select

[irfanmayo0786]

Nothing like that i saw the doc can you tell me which one it's is?

[trevordaniels]

http://plnkr.co/edit/I3JQpmAdvrsZP5OX5N5K

[irfanmayo0786]

we can not give it directly mean static html? im my Case i have like that
<sui-select formControlName="questionType" (ngModelChange)="onChange($event,i,j)"> <sui-select-option value="radio" ></sui-select-option> <sui-select-option value="checkbox"></sui-select-option> <sui-select-option value="input"></sui-select-option> <sui-select-option value="date">Date</sui-select-option> </sui-select>

[trevordaniels]

No, you cannot insert html directly here. You could use templates or a formatter function as outlined in the docs, or check out this pr to see what's coming soon #225

[irfanmayo0786]

hello i'm using formControlName reactive form instead of the ngModel how can i bind it? still in my case when i bind it with formControlName it bind complete object of option like {name:'radio',value:'radio'} how can i solve it?

[irfanmayo0786]

can you tell me how i can use formControlName instead of the [(ngModel)]

[irfanmayo0786]

@trevordaniels i'm waiting your response on it.

[trevordaniels]

Reactive forms shouldn't make any difference. Create a plunkr with your code and I'll see if I can help you. On 8 Sep 2017 8:49 PM, "irfanmayo0786" <notifications@github.com> wrote: @trevordaniels <https://github.com/trevordaniels> i'm waiting your response on it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#291 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAcBY6e_Jr0Fnk29bxZFcKSSzwS1koVpks5sgRuugaJpZM4PN8cg> .

[irfanmayo0786]

<sui-select class="selection" formControlName="questionType" [options]="options" labelField="name" [isSearchable]="searchable" [isDisabled]="disabled" #select> <sui-select-option *ngFor="let option of select.filteredOptions" [value]="option"> </sui-select-option> </sui-select>
this is my code i'm viewing that question type return {name:'ks',vlaue:'ksl'}

[trevordaniels]

Check out the plunkr I sent for how to use valueField

…

On 8 Sep 2017 10:07 PM, "irfanmayo0786" ***@***.***> wrote: <sui-select class="selection" formControlName="questionType" [options]="options" labelField="name" [isSearchable]="searchable" [isDisabled]="disabled" #select> <sui-select-option *ngFor="let option of select.filteredOptions" [value]="option"> </sui-select-option> </sui-select> this is my code i'm viewing that question type return {name:'ks',vlaue:'ksl'} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#291 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAcBY-PyVv2pg5CKf66-pR_hKswts8hEks5sgS3jgaJpZM4PN8cg> .

[irfanmayo0786]

where is the plunkr url i cannot see it bro. @trevordaniels

[irfanmayo0786]

bro i checked it was for not a reactive forms. in reactive forms i got both values. key & name mean i got object in reactive forms.

[trevordaniels]

It makes no difference if you're using reactive forms. Use valueField to return the property you want instead of the whole object. Eg. valueField="prop"

…

On 12 Sep 2017 5:08 PM, "irfanmayo0786" ***@***.***> wrote: bro i checked it was for not a reactive forms. in reactive forms i got both values. key & name mean i got object in reactive forms. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#291 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAcBY0XnmQswXxK2NwPC4aJg5SgOvf-Hks5shi3agaJpZM4PN8cg> .