multiple drop-downs not working with form

Hey guys, in this post we are going discuss a problem that comes when we use drop-down list(multiple drop-down or inside ngFor)  with ngForm.

Problem Discussion:

Many times we have tabular data and so multiple drop-downs on each row (maybe inside ngFor) and everything works fine till this because general we use [(ngModel)] for drop-down list.

[ If you are preparing for an interview please click here - angular interview questions and answers ]

Here is example code

secondPage.component.html

<table class="table table-sm table-bordered table-striped">

      <thead class="light-blue">

             <tr>

                  <th scope="col">Seq No</th>

                   <th scope="col">User Name  </th>

                   <th scope="col"> email </th>

                   <th scope="col"> Contact No </th>

                   <th scope="col"> Address </th>

             </tr>

       </thead>

       <tbody>

             <tr *ngFor="let user of userList; let i =index">

                    <td class="text-center">

                       <label>{{i+1}}</label>

                    </td>

                    <td class="text-center">

                       <input class="form-control-sm" name="userName"                                         type="checkbox" [(ngModel)]=" user.iserName">

                     </td>

                      <td>

                          <label>{{user.userName}}</label>

                      </td>

                       <td>

                           <label>{{user.email}}</label>

                       </td>

                      <td>

                           <label>{{user.contactNo}}</label>

                       </td>

                        <td>

                            <select class="form-control-sm" name="address"                                                                                                                                                                               id="" [(ngModel)]="user.address" >

                                 <option [value]="line1" [selected]="user.address ==line1">{{ user.address }}</option>

                                 <option [value]="line2" [selected]="user.address ==line2">{{ user.address }}</option>

                             </select>

                         </td>

                  </tr>

             </tbody>

        </table>

The above code works fine.

 but once we use “form or ngForm” in our code which contains multiple “drop-downs”  don’t work normally, every drop-down value is get selected to a single value regardless of their actual values.

And we won’t able to identify what's going wrong, because we have given ngModel to our drop-down so its value must get assigned properly.

But but but here is the thing that we must know, whenever we use form it bind the value of drop-down to its name internally and unknowingly we have the same name to the element because we manage it by ngModel, but here it is not enough we have to give different name as well. Check following code

 secondPage.component.html

<form #sampleForm=”ngForm”>

<table class="table table-sm table-bordered table-striped">

      <thead class="light-blue">

             <tr>

                  <th scope="col">Seq No</th>

                   <th scope="col">User Name  </th>

                   <th scope="col"> email </th>

                   <th scope="col"> Contact No </th>

                   <th scope="col"> Address </th>

             </tr>

       </thead>

       <tbody>

             <tr *ngFor="let user of userList; let i =index">

                    <td class="text-center">

                       <label>{{i+1}}</label>

                    </td>

                    <td class="text-center">

                       <input class="form-control-sm" name="userName"                                         type="checkbox" [(ngModel)]=" user.iserName">

                     </td>

                      <td>

                          <label>{{user.userName}}</label>

                      </td>

                       <td>

                           <label>{{user.email}}</label>

                       </td>

                      <td>

                           <label>{{user.contactNo}}</label>

                       </td>

                        <td>

                            <select class="form-control-sm" name="address{{i}}"                                                                                                                                                                               id="" [(ngModel)]="user.address" >

                                 <option [value]="line1" [selected]="user.address ==line1">{{ user.address }}</option>

                                 <option [value]="line2" [selected]="user.address ==line2">{{ user.address }}</option>

                             </select>

                         </td>

                  </tr>

             </tbody>

        </table>

</form>

In the above code, I have appended “i” index value to a name. because I don’t know the size of the list and still I want to give different names.

If you don't want to patch your code in this way angular has provided another way to achieve the same.

 Mark ngModel as a standalone

 <td>
     <select class="form-control-  sm"               
 id="" [(ngModel)]="user.address" [(ngModelOptions)]="{standalone:true}">
<option [value]="line1" [selected]="user.address ==line1">{{ user.address }}</option>
<option [value]="line2" [selected]="user.address ==line2">{{ user.address }}</option>
</select>

</td> 

After making ngModel standalone, that field will not be getting added to the form group and everything will work fine.

Above are the two solutions for our given problem- After that, your code will work smooth.

Thank you.