I have a reactive form with a select
<select [(ngModel)]="user.positionId" name="positionId" class="custom-select form-control form-control-sm" required
formControlName="positionId"
[ngClass]="{
'is-invalid': positionId.invalid && (positionId.dirty || positionId.touched),
'is-valid': positionId.valid && (positionId.dirty || positionId.touched)
}">
<option value="">--Select--</option>
<option *ngFor="let position of user.positionSelectList" value="{{position.value}}">
{{position.text}}
</option>
</select>
It gets passed positionId which is a nullable number
export class User{
id: string;
userName: string;
positionId?: number;
}
The above works when I pass a number value as positionId.
However when it gets passed a null value then the default option of "--Select--" is not selected but an additional blank option appears above it.
What I have tried.
<option value=null>--Select--</option>
and
<option value=udefined>--Select--</option>
but this gives the same result of "--Select--" not selected
I do not wish to set hardcoded number values a fixed number e.g. -1 as I need the required validation to kick in which requires a blank value if not selected.
Have you tried using ngValue?
<select [(ngModel)]="user.positionId" name="positionId" class="custom-select form-control form-control-sm" required
formControlName="positionId"
[ngClass]="{
'is-invalid': positionId.invalid && (positionId.dirty || positionId.touched),
'is-valid': positionId.valid && (positionId.dirty || positionId.touched)
}">
<option [ngValue]="null">--Select--</option>
<option *ngFor="let position of user.positionSelectList" value="{{position.value}}">
{{position.text}}
</option>
</select>
Related
I have a select where I list sellers, the issue is that I have validated that when entering that component in the select I am automatically located, the problem is that I do not go out in that list so the select is empty instead of the first option.
Example
<select
v-model="filter_user"
class="pull-right float-right mr-2 btn btn-light btn-lg"
>
<!-- <option v-for="user in sales_man" :key="user.id" :value="user.id" >
{{ user.name }}
</option> -->
<option value="">All sales man</option>
<option value="3">sales man 3</option>
<option value="4">sales man 4</option>
<option value="7">sales man 7</option>
</select>
I leave the foreach that fills me the same options but commented, but to be understood I put them option 1 to 1, the issue that I am ADMIN so my ID is 1 and every time I enter that option I want to leave me in the first option to see all executives and not 1 specific, how could I do it and not show me the blank select?
Refer: option:selected
<option value="" selected>All sales man</option>
I am working in multiple dropdown menu. I have created an array from php and it looks like this:
https://api.myjson.com/bins/1emzic
Now from this json I want to display 4 dropdown menu.
In the first drop down I need to display
"FS A", "FS MT" and "FS OTHER"
Based on the first selection I need to display its related data in second third and fourth and so on as I add in my data.
This is what I need to bind
<select [(ngModel)]="first" id="first">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="second" id="second">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="third" id="third">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="four" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
Here is my json data
{"FS A":{"BKK":{"BKK PULL":{"BKK SR1":[]},"BKK PUSH":{"BKK BCDE1":[],"BKK BAKE SE1":[]}},"RSM2":{"CHIANGMAI":{"CMI WS SE1":[],"CMI WS SE2":[]},"NORTH":{"NO1 SE1":[],"NO2 SEPLUS1":[],"NO3 SE1":[]},"ASM HOTEL BKK":{"BKK HO 5STARS1":[],"BKK HO SR1":[],"BKK HO SR2":[],"BKK HO SR3":[]}}},"FS MT":{"FSR1":{"FSA1":{"FS MAKRO":[]}},"FSR2":{"FSA2":{"FS FOODLAND":[],"FS GAS STATION":[],"FS VILLA MARKET JP":[],"SIAM FOODSERVICE":[]}},"FS LOCAL EXP":{"FS LOCAL EXP BKK":{"FS LOCAL EXP BKK":[]},"FS LOCAL EXP CD":{"FS LOCAL EXP CD":[]},"FS LOCAL EXP MM":{"FS LOCAL EXP MM":[]}}},"FS OTHER":{"FS OTHER":{"FS OTHER":{"FS OTHER":[]}}}}
Can anybody help me in this?
Here I am working:
https://stackblitz.com/edit/angular-dsylxi
You need to define the dependency on each other and based on that you can fill the models and its options. I will go for generic solution which can be applied with one function and works for all the drop-downs.
This are the model variables you need
wholeList:any = [];
first:any = [];
second:any = [];
third:any = [];
four:any = [];
firstModel = ''
secondModel = ''
thirdModel = ''
fourModel = ''
Then first you fill the first dropdown
this.testService.get_data().subscribe(
res => {
this.wholeList = res;
this.first = Object.keys(this.wholeList).map(a=> a);
console.log("res", this.first);
},
err => {
console.log(err);
}
)
Then in the view you need to fire a dependency which should look like this, note that I am defining dependency ChangeDropdown(this.wholeList[firstModel],'second')"
<select [(ngModel)]="firstModel" id="first" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of second" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="thirdModel" id="third" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel][thirdModel],'four')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of third" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="fourModel" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of four" [value]="item">{{item}}</option>
</select>
and finally one common function which will update the models
ChangeDropdown = (value,dropdownName) =>{
this[dropdownName] = Object.keys(value).map(a=>{
return a;
})
}
Demo
I am trying to preselect (set as default) value from Angular 5 drop down.
There are three values and I am trying to set the second one with this code but it doesn't work. I can't make any changes in the component, only in the template.
<select [(ngModel)]="declaration.media" name="media" (change)="onChangeMedia()" class="form-control form-control-sm" required>
<option *ngFor="let media of mediaArray" value="{{media.value}}" selected = "{{media.value == '02'}}">{{media.text}}</option>
</select>
UPDATE: if I remove [(ngModel)] then it works, but no two way binding.
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
My Vue/Buefy app automatically selects the first option from the list:
<b-select model="form.cities[i].index"
v-on:input.once="analyt('City ' + i)"
#input="form.cities[i].name = cities[form.cities[i].index ['#attributes'].Name"
:id="'city-'+i"
:name="'city-'+i"
:required="i == 0"
>
<option
:value="index"
v-for="(city,index) in cities"
v-text="city['#attributes'].Name">
</option>
</b-select>
How do I avoid that? I just want empty field selected by default (or nothing to be selected at all)
Could you just add an empty option field? This should solve your problem.
<b-select model="form.cities[i].index"
v-on:input.once="analyt('City ' + i)"
#input="form.cities[i].name = cities[form.cities[i].index ['#attributes'].Name"
:id="'city-'+i"
:name="'city-'+i"
:required="i == 0"
>
<option selected></option>
<option
:value="index"
v-for="(city,index) in cities"
v-text="city['#attributes'].Name">
</option>
</b-select>
I solved this problem by making sure the first element in the populating array was my default (the one I wanted selected). Then I set the value of the select element to the default.
In my case, I was populating the drop down list based on selection of a different drop down.
First drop down
<select id="firstDropdown" #change="populateDropdown">
// options code ...
</select>
Drop down being populated by the first drop down.
<select id="populatedDropdown">
<option v-for:"item in items">
{{ item }}
</option>
</select>
In Component script
data: function() {
return {
items: []
}
},
method: {
populateDropdown() {
// fetch items from api and store in "array".
this.items = ['Default'].concat(array);
document.querySelector('#popualtedDropdown').value = 0;
}
I hope that makes sense and helps.
<option
value="none" selected disabled hidden>
</option>
This worked for me seamlessly.
Another option is
<option
selected>
</option>
which gives an empty first entry in the list which is a bit undesired.
Am I grabbing the value of the selection incorrectly in this Vue template form?
<select class="form-control" v-model="object.property">
<option selected="selected" value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
You are binding the value of object.property to the select element correctly.
But, Vue is going to ignore the selected attribute on the first option element.
Here's the warning you will get if you try to use this template:
inline selected attributes on <option> will be ignored when using v-model. Declare initial values in the component's data option instead.
So, if you want the initial value of the select to be the first option, set object.property to that value when you define it in the data method.
Here's an example:
new Vue({
el: '#app',
data() {
return { object: { property: "Option 1" } }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<select class="form-control" v-model="object.property">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
{{ object.property }}
</div>