We Keep Coding

Multiple Select dropdown with dynamic data in Angular

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:''
});
}

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.

(click) funtion not triggering in chrome angular 6

(click) funtion not triggering in my select tag when i use google chrome but its works in mozila
this is my code
<div class="col-xl-4 col-lg-9">
<select formControlName="deptId" class="form-control m-input" >
<option>SELECT</option>
<option *ngFor="let item of listAllDepartment" (click)="getdoctorlistid(item.dept_id)" value={{item.dept_id}}>{{item.dept_name}}</option>
</select>
</div>
Thanks

You should use ngModelChange with select instead of click
<selectformControlName="deptId" class="form-control m-input" [(ngModel)]="itemSelected" (ngModelChange)="getdoctorlistid(itemSelected)">

You can't add such an event to an <option>
You can add
<select
[(ngModel)]="selectedItem"
(ngModelChange)="getdoctorlistid(selectedItem)">
<option>SELECT</option>
<option
*ngFor="let item of listAllDepartment"
(click)="getdoctorlistid(item.dept_id)"
value={{item.dept_id}}>
{{item.dept_name}}
</option>
</select>
Edit: Like #Sajeetharan answered

Accessing each part of an array using (change) Angular 5

I am trying to create a box, where you can click on each option within it and it will filter through data coming from firebase database. So far, I have it working where you can click on each of them. However, I can only get it to perform one task.
Each of the options comes from this array:
items: number[] = [1,2,3,4,5,6,7,8,9];
and the filtering comes from this function:
filterByBedrooms(bedrooms: number) {
this.bedFilter.next(bedrooms);
console.log('clicked')
}
and then I have this form where I call the function:
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms(items[4])">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
Now obviously in this I bind to the function and the array like so:
(change)="filterByBedrooms(items[4])"
I am aware that what I need to do is somehow bind to it like this:
(change)="filterByBedrooms(item)"
However, the *ngFor comes after this part, so it does not work.
My question is, how do I bind (change) to each of the options (coming from the array) within my select box and not just one part of the array?

You don't bind your event to your options, you bind it to your select.
You can see it for yourself : the select carries the ngModel attribute, not the options.
See it as an input of type text, with predefined results.
So simply call your method with the bound ngModel like this.
<select
class="form-control form-control-lg small-drop-down"
type="number"
[(ngModel)]="bedrooms"
name="bedrooms"
(change)="filterByBedrooms(bedrooms)">

You can do like this, just declare an identifier for select and use the value in your method.
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms(bedrooms.value)">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" #bedrooms>
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
Also I noticed you have binded the variable bedrooms to select. That means that you have that variable in your controller so you can redefine your filterByBedrooms method to something like this
filterByBedrooms() {
this.bedFilter.next(this.bedrooms);
console.log('clicked')
}
If you are using the second example than your form will look like this
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms()">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" >
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>

I would suggest you to use (ngModelChange) event as far as you use ngModel binding, so the code should look like:
<form #fSearchPropertiesByBedrooms>
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
And actually I'm not sure you need a form for this particular control as I see you commented the submit button, so this can be simplified to:
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
Don't forget to add value check on filterByBedrooms function as in your case it can by invoked with undefined value.

Text box in select option for web app

I am building a web app that is used to select drugs and details associated with drugs. There are some sections that allow for options, but the 'other' option requires the input of text as opposed to selecting one of the other options. I am trying to add a text box after a 'other' option is selected.
Here is the entire code that I have been working on. I have tried using javascript and some jquery, but I am unable to get it to work. Any help would be great please.
<div class="form-group">
<label class="control-label col-sm-2">Route:</label>
<div class="col-xs-3">
<select id="Quantity" name="quantity" class="form-control" required="">
<option value="" selected="" disabled="">Please select A dosage...</option>
<option value="PO">PO</option>
<option value="IV">IV</option>
<option value="PR">PR</option>
<option value="Topically">Topically</option>
<option value="other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Frequency:</label>
<div class="col-xs-3">
<select id="Regime" name="regime" class="form-control" required="">
<option value="" selected="" disabled="">Please select A regime...</option>
<option value="Once A Day">Once A Day</option>
<option value="BD">BD</option>
<option value="TDS">TDS</option>
<option value="QDS">QDS</option>
<option value="Other">Other (please specify)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date of Prescription:</label>
<div class="col-xs-3">
<input class="form-control" type="date" name="prescription" placeholder="(yyyy-mm-dd)" required>
</div>
</div>

Look please this jsfiddle example
$('textarea').hide();
$('#Quantity').change(function()
{
var o = $(this).find('option:selected').val();
console.log(o);
if(o=='other') $('textarea').show();
});
So here are some explanations :
$('textarea').hide(); // hide the textarea by default
$('#Quantity').change(function(){ }); // when the user select an option in the #quantity select tag
var o = $(this).find('option:selected').val(); // get the current value of the option selected
if(o=='other') $('textarea').show(); // if the variable o is equal to "other" then show the textarea

bootstrap-select selects a wrong option each time.

I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.
Plunker is setup here:
http://plnkr.co/edit/HPPlxx?p=preview
(code is in dashboard.html and dashboard.js)
That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option ng-repeat="logic in vm.Logics" value="{{logic.value}}">{{logic.displayName}}</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>

This should fix your problem. You need a blank state option. Also it helps to use ng-options rather than using ng-repeat in the option. Hope this solves your problem!
<div ng-controller="dashboard as vm">
<div class="block-area">
<div class="row col-md-12 ">
<h3 class="block-title"> {{vm.title}}</h3>
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select required ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" ng-options="logic.displayName for logic in vm.Logics track by logic.displayName" bootstrap-dropdown >
<option value="">Pick One</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
</div>
</div>
</div>

You should use ng-options to populate the option elements of a select input.
Like so:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics track by logic.value" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option value="">Select...</option>
</select>
EDIT
Use the following:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics" check-validation class="validate[customFunc]" bootstrap-dropdown>
<option style="display:none" value="">Select</option>
</select>
where customFunc is a new custom validation function you create to check that the selected value is not "".