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 "".
Related
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.
What I want to Achieve is that I have a Select field in angular6 on the basis of the selected value I want to hide and display another div.
Here is the code.
<div class="form-group">
<label for="servicePriviledges">Managed</label>
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option value="false">False</option>
<option value="true">True</option>
</select>
<br>
</div>
<div class="form-group" *ngIf="managed">
<label for="managerType" >Manager Type</label>
<select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
*ngIf does make an impact when I switch it for the first time but not after that. the change is not detected.
I have even tried setting up the visibility attribute of style as well as [hidden] directive but got the same result.
I have even tried giving an on change method but no change in result.
version information:
"#angular/core": "^6.1.6",
"#angular/forms": "^6.1.6",
Both these controls are under a form 'ngForm'.
Another approach is to attach [ngValue] directive for every option.
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>
managed will have a string value of 'true' or 'false' update ngIf like this
<div class="form-group" *ngIf="managed === 'true'">
...
</div>
or you can use ngValue so managed will have a boolean value of true , false
<select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>
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.
Before marking question duplicate, I want to make clear that I have already tried all the ways possible (e.g. here) to simply load a select2 dropdown on a simple page in Meteor.
Below is simple code to understand my select2 application procedure.
ManageRoles.js
Template.ManageRoles.onRendered(function() {
$(".roleSelect").select2();
});
ManageRoles.html
<form class="assignRoleForm">
<div class="row">
<div class="col-sm-12">
<label>Roles</label>
<select class="roleSelect form-control" multiple="multiple" required>
<option value="">Select Option</option>
<option value="1">ADMIN</option>
<option value="2">MANAGER</option>
</select>
</div>
</div>
<br/>
<div class="text-center">
<button type="submit" class="btn btn-success"> Assign </button>
<button type="button" class="btn btn-danger"> Close </button>
</div>
</form>
select2 Import structure
root\client\vendor\select2\select2-bootstrap.css
root\client\vendor\select2\select2.js
root\client\vendor\select2\style\select2.css
Below is the snapshot of the current output.
****************** Updated *******************
Upon doing this console.log($('.roleSelect').get(0)); I get below in console log
<select class="roleSelect form-control" multiple="multiple" required="">
<option value="">Select Option</option>
<option value="fov9sPjiXtbRdJccR">ADMIN</option>
<option value="ga4p3FwQ76LH4Nq8y">MANAGER</option>
</select>
I would try the following:
Template.ManageRoles.onRendered(function() {
this.$(".roleSelect").select2({
placeholder: 'Select Option'
});
});
And then in the HTML leave the first option blank:
<option value=""></option>
I have a drop-down form on a landing page that needs to change the Submit button URL upon form submission. See screen shot below:
Drop Down Screeshot
Here is the code for the form:
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company">
<option value="">Select One</option>
<option value="Tire Dealer">Tire Dealer</option>
<option value="Auto Service Dealer">Auto Service Dealer</option>
<option value="Tire Wholesaler">Tire Wholesaler</option>
<option value="Auto Parts Shop">Auto Parts Shop</option>
<option value="Warehouse Distributor">Warehouse Distributor</option>
<option value="Jobber">Jobber</option>
<option value="Other">Other</option>
</select>
</div>
</fieldset>
</form>
I've found a few codes that seem like they could work, but I'm not experienced enough to a) alter the code for a dropdown menu and b) add more than one or two URLs (there are six or so options). Can anyone help?
Many thanks in advance :)
ETA: I'm not actually able to edit the form code, as it's drag-and-drop in my editor.
As I understand your code, the pageId is the important information. So I would put this as the value of your dropdown (below is just dummy data, needs to be replaced with actual pageIds) and set the value in the onchange method.
<form action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">
<input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select id="which_best_describes_your_company" name="which_best_describes_your_company"
class="text form_elem_which_best_describes_your_company" onchange="selectionChanged(this.value)">
<option value="">Select One</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32">Tire Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef33">Auto Service Dealer</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef34">Tire Wholesaler</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef35>Auto Parts Shop</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef36">Warehouse Distributor</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef37">Jobber</option>
<option value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef38">Other</option>
</select>
</div>
</fieldset>
</form>
<script>
function(selectedPageId){
document.getElementById('pageId).value = selectedPageId
}
</script>
Use a listener on the select element to capture the selected value and append or use it to modify the form action. The following example appends the selected value to the form action:
HTML:
<form id="form" action="/fsg?pageId=fbfa157c-2f78-4150-b3c7-fc1ca4cbef32&variant=a" method="POST">
<input type="hidden" name="pageId" value="fbfa157c-2f78-4150-b3c7-fc1ca4cbef32"><input type="hidden" name="pageVariant" value="a">
<fieldset class="clearfix" style="width: 483px; height: -21px;">
<div class="lp-pom-form-field clearfix" id="container_which_best_describes_your_company">
<select onchange="updateFormAction()" id="which_best_describes_your_company" name="which_best_describes_your_company" class="text form_elem_which_best_describes_your_company"><option value="">Select One</option><option value="Tire Dealer">Tire Dealer</option><option value="Auto Service Dealer">Auto Service Dealer</option><option value="Tire Wholesaler">Tire Wholesaler</option><option value="Auto Parts Shop">Auto Parts Shop</option><option value="Warehouse Distributor">Warehouse Distributor</option><option value="Jobber">Jobber</option><option value="Other">Other</option></select>
</div>
</fieldset>
</form>
Javascript:
function updateFormAction() {
var selectedVal = document.getElementById('which_best_describes_your_company').value
var form = document.getElementById('form')
form.setAttribute('action', form.action + '&company='+selectedVal)
}
Here is the fiddle to test it : https://jsfiddle.net/h23g6o3x/