Multiple Select dropdown with dynamic data in Angular

Question

currently i'm working on a angular project and i'm facing some issue in creating multiple select dropdown with dynamic data. I want the to acheive something like this. There will be one button which when clicked will add multiple select dropdown in the form and that select dropdown will have dynamic data fetched from api.

The above thing is already acheived but the problem that i'm facing is that all the dynamic select dropdown had same ng-model and same name, so when i'm selecting value for one select dropdown, the same value is getting selected for all the dynamic select dropdown.

Attaching the screenshot for referrence

Now when i select any single dropdown, all the value for other dropdown are getting selected as well.

I hope i'm able to explain as much as possbile.

The code i used to add multiple dropdown

<div class="pull-right"><button (click)="addNewRow()" class='btn btn-success'>Add New Subjects</button></div>

This html is added dynamically in the form

<div class="row" *ngFor="let ts of total_subjects; let i=index">
                    <div class="col-4">
                      <div class="mb-3">
                        <label class="form-label" for="Status">Select Subject</label>
                        <select class="form-select digits" id="subject_id" name="subject_id" [(ngModel)]="form.subject_id"
                        required
                        #subject_id="ngModel" (change)="getChapter(subject_id.value)">
                          <option value="">Select Subject</option>
                          <option *ngFor="let sub of subjectList" value="{{sub.subject_id}}">{{sub.name}}</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-4">
                      <div class="mb-3">
                        <label class="form-label" for="Status">Select Chapters</label>
                        <select class="form-select digits" id="chapter_id" name="chapter_id" [(ngModel)]="form.chapter_id"
                        required
                        #chapter_id="ngModel" >
                          <option value="">Select Chapter</option>
                          <option *ngFor="let chap of chapterList" value="{{chap.subject_id}}">{{chap.name}}</option>
                        </select>
                      </div>
                    </div>
                    <div class="col-3">
                      <div class="mb-3">
                        <label class="form-label" for="questions">No of Questions</label>
                        <input class="form-control" id="questions" type="number" name="questions" [(ngModel)]="form.questions"
                        required
                        #questions="ngModel" />
                      </div>
                    </div>    
                    <div class="col-1"><button (click)="removeRow(i)" class='btn btn-danger'>Remove</button></div>                
                </div>

Here is the component code i used

total_subjects:any = [{
    subject:'',
    chapter:'',
    questions:''
}];
addNewRow(): void{
    this.total_subjects.push({
      subject:'',
      chapter:'',
      questions:''
    });
}

Juan Vicente Berzosa Tejero · Accepted Answer · 2022-03-26 18:18:16Z

I don't really like to work with ngmodel when it is something complex, but in any case, I would try to give them in runtime a different name to each row, based on the index.

If you had left a StackBlitz with your current code worling, I would have tried to change it in your code to prove that it works, but more or less it consists of something like this:

<div class="row" *ngFor="let ts of total_subjects; let i=index">
   <div class="col-4 mb-3">
      <label class="form-label" for="Status">Select Subject</label>
      <select 
         class="form-select digits" 
         id="subject_id_{{i}}" 
         name="subject_id_{{i}}"
         [(ngModel)]=`form.subject_id_${i}`
         required
         #subject_id_{{i}}="ngModel"
         (change)=`getChapter(subject_id_${i}.value)`>
            <option value="">Select Subject</option>
            <option *ngFor="let sub of subjectList,let i2 as index" value="{{`sub.subject_id_${i2}}">{{sub.name}}</option>
      </select>                    
   </div>

Note that you will have to play with the sintaxis {{ index}} and ${index} (backtips), depending on the case...

I hope this idea helps you.

Collectives™ on Stack Overflow

Multiple Select dropdown with dynamic data in Angular

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