CODEWITHSUNDEEP
htmlangularangular-ngmodelngfor
Tobet
Tobet

Reputation: 347

NgModel empty with select html tag

Look a this:

        <label>Business unit</label>
        <select name="BU" class="form-control" [(ngModel)]="interventionForm.DLCODBUN">
            <option *ngFor="let item of buList" >{{item.id}}</option>
        </select>

When I open the relative web page, the select box show a default value ( the first of the list ) , but that's only a view binding.

here's the image

Infact, if i go on with in the application, the variable bound with [(ngModel)] will be undefined.

Only with a selection on the select box interventionForm.DLCODBUN will be populated, but i want the same thing with the default value! isn't strange? Someone know a workaround?

Upvotes: 0

Views: 147

Answers (2)

gokaka
gokaka

Reputation: 136

Maybe it caused by missing the ngValue attribute in the option tag.

Try to add item value to the option tag, it may work.

<option *ngFor="let item of buList" [ngValue]="item.value">{{item.id}}</option>

Upvotes: 0

vertika
vertika

Reputation: 1424

Assign interventionForm.DLCODBUN this with the default value in your component.ts . Then it will appear in the select box as well and you will have the value in component.ts . You will not get the assigned value until you change something from drop down , so best option is assign a default value already in the component.ts

Upvotes: 2

Related Questions