1

in my html use select options drop-down list but it's not working in my Angular project

 <td>
 <select type="text" class="form-control" [(ngModel)]="addressDetails.AddressTypeId"id="AddressTypeId" formControlName="AddressTypeId" style="height:29px; width:200px; padding:3px">
 <option disabled selected value > -- select an option -- </option>
 <option *ngFor="let addressType of addressTypeDetails" value={{addressType.AddressTypeID}}>
             {{addressType.AddressType}} </option>
 </select>
 </td>
P Rane
  • 306
  • 1
  • 5
  • 16
  • Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. "Not working" is not a very useful description of a problem. – mplungjan Oct 31 '18 at 08:10
  • `selected` attribute is useless in Angular : you must provide your `ngModel` with the default value you want. –  Oct 31 '18 at 08:11
  • "it's not working" does not clearly explain what is your problem. Please make sure to provide any proper error messages you get. – Nimeshka Srimal Oct 31 '18 at 08:17
  • no any error message, already bind array's data, but i want to set a default value for the drop-down list – P Rane Oct 31 '18 at 08:56

1 Answers1

0

You are binding ngmodel of array object, which is incorrect. I have created a sample example, please check on stackblitz I created addressDetail object to bind the with ngModel. please check the html below. Here is the component code.

addressTypeDetails = [{AddressTypeID:1,AddressType:'first'},{AddressTypeID:2,AddressType:'second'}]
  addressDetail = {addressTypeId:0}

Here is the Html Code.

 <select type="text" class="form-control" [(ngModel)]="addressDetail.addressTypeId" id="AddressTypeId"  style="height:29px; width:200px; padding:3px">
 <option > -- select an option -- </option>
 <option *ngFor="let addressType of addressTypeDetails" value={{addressType.AddressTypeID}}>
             {{addressType.AddressType}} </option>
 </select>
Ajay Ojha
  • 380
  • 1
  • 3
  • 9
  • it's already bind array's properties , but can't bind default value for drop-down list – P Rane Oct 31 '18 at 08:59
  • are you talking about default selected value, I have set the default value in addressTypeId field and that is selected on the screen. please check the stackblitz example. – Ajay Ojha Oct 31 '18 at 09:01
  • `` need to give value = 0 – P Rane Oct 31 '18 at 11:33
  • I have updated the code, the changed code is: if there is no value then it is null and set null value in the option element. – Ajay Ojha Oct 31 '18 at 12:01
  • Yes that also work, but just for your info, as a practice should follow null for non dB text. Because if server return null value then this will not work, I am talking about application level not for this case. – Ajay Ojha Nov 01 '18 at 03:58