Dynamic bind drop down option in angular 4

Question

I have use below code for bind repeated drop down and select drop down value which are store in database

<div class="form-group row" *ngFor="let option of roles let x = index">
    <div class="col-8">
        <select [disabled]="adminstratorStatus=='true'" class="form-control custom-select col-12" id="company_info_management" required
        [(ngModel)]="option.module_defaultselection" name="company_info_management"
        #company_info_management="ngModel" (ngModelChange)="onSelect($event,x)">
            <option value=''>--select company--</option>
            <option *ngFor="let myRole of option.module_role;" value= {{myRole.module_role}}>
            <!--[ngValue]="myRole.module_role"-->
                {{myRole.module_role_description | translate }}
            </option>
        </select>
    </div>
</div>

Select drop down value using ngModel is not work

And module_defaultselection have proper value which are available in option in drop down.

Hi Rakesh. Can you provide your component's code which is bound to this template? — n.yakovenko
– n.yakovenko, Commented Nov 1, 2017 at 9:44
if your myRole.module_role is string then you should use [value] attribute and if it's an object then use [ngValue] attribute with compareWith function. — Touqeer Shafi
– Touqeer Shafi, Commented Nov 1, 2017 at 10:17
myRole.module_role is string and i try to use [value] using below code but is not working [value]="myRole.module_role" and [value]="{{myRole.module_role}}" — Rakesh Jogani
– Rakesh Jogani, Commented Nov 2, 2017 at 6:18

Rakesh Jogani · Accepted Answer · 2017-11-03 05:39:46Z

Use [ngModelOptions]="{standalone: true}" in select drop down refer below code

<div class="form-group row" *ngFor="let option of roles let x = index">
      <div class="col-8">
          <select [disabled]="adminstratorStatus=='true'" class="form-control custom-select col-12" id="company_info_management" required
                                                    [(ngModel)]="roles[x].module_defaultselection" name="company_info_management"
                                                    #company_info_management="ngModel"   [ngModelOptions]="{standalone: true}">
                                                <option value="">--select company--</option>
                                                <option *ngFor="let myRole of option.module_role;" value="{{myRole.module_role}}"> {{myRole.module_role_description | translate }} </option>
                                            </select>
                                        </div>
                                    </div>

Collectives™ on Stack Overflow

Dynamic bind drop down option in angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related