I want to display a select with all the option of my enum and change the value to update my database.
To do so:
I have an enum:
export enum SubscriptionEnum {
DAILY= 'DAILY',
ANNUAL= 'ANNUAL',
HALF-YEARLY = 'HALF-YEARLY ',
QUARTERLY = 'QUARTERLY ',
MONTHLY = 'MONTHLY ',
}
In my .ts file i create my enum var:
SubscriptionEnum = SubscriptionEnum ;
And then i display the option in my .html:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select #subscriptionid="subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
This example give me the select with all option and the value change in the view page when i clicked on a new option.
Then, i add the (change) in the select to call a method that change the content of the client subscription in the db. I did it like that:
.html:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
In my changeInfo i send the event and take the event.id and the event.value to update my db and it works because the select option change when i click on it and the <p>{{client.subscription}}</p> that is a value of my db take the good value.
Then i wanted to add a selector so my option value take directly the good value and this is not working ...
I add it like that:
<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
<option value="{{option.key}}"
selected="{{option.key == client.subscription}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}}
</option>
</select>
This give highlight me my sentence and tell me "Wrong attribute method" and when i reload my page my div contains the good value which is "ANNUAL" but my option is equal to QUARTERLY. If i click to change the option, the good value will be saved in my db but the display of my select selector will be wrong.
What do i not understand ? Thank you for your help
There is a subtle difference between two similar Angular syntaxes:
selected="{{option.key == client.subscription}}"
and
[selected]="option.key == client.subscription"
There are both property bindings but the former assigns interpolated value to property.
It means that even in case of falsy values selected property will get true;
el.selected = 'false'
because string is a truthy value in js.
So you can consider the following options:
Use correct property binding:
[selected]="option.key == client.subscription"
Use value binding on <select> tag instead:
<select #subscription id="subscription" [value]="client.subscription">
<option value="{{option.key}}"
*ngFor="let option of SubscriptionEnum | keyvalue">
{{option.value}} {{option.key == client.subscription}}
</option>
</select>
Related
My requirement is to show the content based on selection of dropdown list.
component.ts
OptionList: LookupActionCode[]=[];
public setList(actionType: any):void{
this.anotherOptionList = [];
if(actionType == dataConstant.calendar){
this.List.push(
{
Name: dataConstant.content
},
{
Name: dataConstant.showcontent
},
{
Name: dataConstant.hidecontent
},
)}
switch(actionType){
case dataConstant.memberdata:
this.OptionList = this.memberCodes;
break;
case dataConstant.referral:
this.OptionList= this.optionalCodes;
break;
case dataConstant.Calendar:
this.OptionList = this.List;
break;
}
.component.html
//first dropdown
<label for="OptionList" class="cpp-required"> <b>Action</b></label>
<select id=action class="form-control" required (change) ="setList($event.target.value)">
<option value="" disabled [selected]="true"></option>
<option [value] = "dataConstant.referral">{{dataConstant.referral}}</option>
<option [value] = "dataConstant.memberdata">{{dataConstant.memberdata}}</option>
<option [value] = "dataConstant.calendar">{{dataConstant.content}}</option>
</select>
//second dropdown
<label> <b>Action</b></label>
<select id=action class="form-control" required>
<option value="" disabled [selected]="true"></option>
<option *ngFor="let option of optionList" [value] ="option">{{option.Name}} </option>
</select>
<div *ngIf="logic>
//some content to show and hide the data
</div>
So my requirement is from the first dropdown if i select the dataConstant.content then In secondit will show the realted dropdown lists those are dataConstant.content,dataConstant.showcontent and dataConstant.showcontent (implemented)
So If select the dataConstant.showcontent value then I need to show the data in div
Can anyone help me on this
If you first add a property to your component in ts to hold the selected value:
theProperty: string | undefined;
and on your select list in html add:
<select [(ngModel)]="theProperty" ect...
This will set up two way binding between your property and the select list. (Note reactive forms are good option here but have chose this for simplicity).
You can then add:
*ngIf="theProperty === thingToMatchTo"
But maybe pick a more sensible property name than what I've used.
NOTE - Make sure you add FormsModule to your imports in the Module that this component is declared. It's what makes the ngModel directive available to you.
I have a select in angular6 in which option is iterating over an array.
That array has one pipe which dynamically changes array value.
The problem is that when I have one selected value in model and array get changed and that value is not available in that array on which it iterates. Then select by default showing the first element but it should show empty select.
Kindly suggest me the best way to do it.
<select
(change)="handleOfferChange()"
class="alc-form-control"
name="offer"
id="offer"
[(ngModel)]="detailCopy.allowedOffers">
<option
*ngFor="let offer of providerMaster | active: activeOnly"
[ngValue]="[offer.csaid]"
>{{ offer.csaid }}</option
>
</select>
You can manually reset the ngModel, to do this you have to pass ngModel to you pipe as an argument and in your pipe when your array changes, reset the ngModel to empty value (Shown below)
//yourTemplate.html
<select [(ngModel)]="detailCopy.allowedOffers" #mySelectModel="ngModel">
<option *ngFor="let offer of providerMaster | active: activeOnly : mySelectModel" [ngValue]="[offer.csaid]" >{{ offer.csaid }}</option>
</select>
//yourPipe.ts
......
import { NgModel } from '#angular/forms';
transform(arr: any[], mySelectModel: NgModel): any {
if (your logic and conditions) {
mySelectModel.reset();
return arr;
}
}
could you please tell me how to add onchange event on dropdown in angular ? I made a simple demo in which initially I fetch bank names and show in drop down . Now I want to add on change event on that dropdown .In other words I want to which bank user select . Using that bank name I want to get state names
here is my code
https://stackblitz.com/edit/angular-batt5c
<select class='select-option'
(ngModelChange)='onOptionsSelected($event)'>
<option class='option'
*ngFor='let option of dropDownData'
[value]="option.seo_val">{{option.text_val}}</option>
</select>
onOptionsSelected(){
console.log('===');
// send selected value
this.seletedValue.emit('');
}
Use (change) event instead of (ngModelChange).
<select class='select-option'
#mySelect
(change)='onOptionsSelected(mySelect.value)'>
<option class='option'
*ngFor='let option of dropDownData'
[value]="option.seo_val">{{option.text_val}}</option>
</select>
In typescript file:
onOptionsSelected(value:string){
console.log("the selected value is " + value);
}
try this.
<select class='select-option' [(ngModel)]="selected"
(change)='onOptionsSelected($event)'>
<option class='option' *ngFor='let option of dropDownData'
[value]="option.seo_val">{{option.text_val}}</option>
</select>
public onOptionsSelected(event) {
const value = event.target.value;
this.selected = value;
console.log(value);
}
I have dynamically generated multiple select elements in a page. And I have used
v-model = "selected_option"
for getting the value of the option selected . But all the select elements in the page have different option values and none of the select elements have any common default option value. All the select elements need to have the first option element as the default selected value. But if I write
selected_option = ''
then all the select elements are showing blank by default.
I can get the first option value as the default selected value if I remove
v-model = "selected_option"
and
selected_option = ''
but then I am not being able to get the selected value in the #change method . Here is my code
<div v-if="row.answer_input_type === 'Dropdown'">
<template v-for="answer in answers">
<template v-if="answer.AnswerTypeID === row.answer_type_id">
<select class="dropdown_cl" v-bind:disabled="row.is_enabled == 1 ? false : true" #change="selectChange(row.question_id)" v-model="selected_option">
<option v-for="option in answer.AnswerDescription" v-bind:value="option.AnswerMasterID" >{{option.AnswerDescription}}</option>
</select>
<p v-for="option in answer.AnswerDescription">{{option.AnswerMasterID}}</p>
</template>
</template>
</div>
the default value has been assigned as follows -
el : '...'
data : {
...
selected_option: '';
},
methods: {
selectChange: function(question_id) {
var self=this;
alert(question_id + " " + self.selected_option);
},
...
},
....
I need each select to have the first option as the default selected value. How can I do this? thanks
Here is a quick example of what I was explaining in comments.
<select v-for="answer in answers"
v-model="answer.selectedOption">
<option v-for="option in answer.options"
:value="option">
{{option}}
</option>
</select>
Example.
If you take this approach, you can manage the default option for each individual select. You also will know what was selected for each answer automatically.
I have a select box which more or less looks like this :
<select id="select_experience">
<option value="1,2">1-2</option>
<option value="3,4">3-4</option>
<option value="5,6,7,8,9">5-9</option>
<option value="10,11,12,13,14,15">10-15</option>
<option value="15+">15+</option>
</select>
This is a search filter, so that if I select an option out of this, it will create a condition for querying. I have a column in mysql which shows tutor experiences :
tutorid | experience
1 | 5
2 | 1
3 | 10
4 | 3
My current query looks like this:
$query_tutors = $this->db->get_where("tutor_info", array("tutor_id" => $id, "I need to add that selectbox selected option here."));
My question is :
Where will I do the explode thing? and how will I check for 15+ in that query?
Lets assume you stored select_experience input to $id variable.
You can use following code
$this->db->from('tutor_info');
if (strpos($id,'+') !== false)//if 15+
{
$ranges=explode('+',$id);//get the integer value.You may need to check more to make sure it is intger
$this->db->where('tutorid >=',$ranges[0]);//only >=15
}
else if (strpos($id,'-') !== false)//if range like 5-9
{
$ranges=explode('-',$id);
$this->db->where('tutorid >=',$ranges[0]);//>=5
$this->db->where('tutorid <=',$ranges[1]);//<=9
}
$query_tutors=$this->db->get();
Note
This answer is for your first revision where values was like 1-2,3-4,5-9..
in your model, get the selected option
$experience_level = $this->input->post("select_experience");
This will work only if change the html like this
<select name="select_experience" id="select_experience">
<option value="1,2">1-2</option>
<option value="3,4">3-4</option>
<option value="5,6,7,8,9">5-9</option>
<option value="10,11,12,13,14,15">10-15</option>
<option value="15+">15+</option>
</select>
If not you can either submit the value by Ajax...
Any way get the selected option value to $experience_level
Then do condition check like this
if($experience_level !='15+'){
$this->db->where_in("experience", explode(",", $experience_level);
}else{
$this->db->where("experience >", 15);
}