Search code examples
htmlangularangular-ngmodelngfor

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?

Solution

  • 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>