I have a form in which I have a multiple select field. Options for this select field are populated from received data e.g. Tasks objects.
[
{"id":7,"title":"Seven","project":1},
{"id":8,"title":"Eight","project":2},
{"id":9,"title":"Nine","project":2}
]
and my select field:
<ion-list>
<ion-item>
<ion-label>Select tasks</ion-label>
<ion-select formControlName="tasks" multiple="true" (ionChange)="arrangeSelectedTasks()">
<ion-option *ngFor="let task of tasks" value={{task}}>{{task.title}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
the function
arrangeSelectedTasks(){
for(let task of this.addScenarioForm.value.tasks){
this.selectedTasks.push(task)
}
console.log("selectedTasks: ", this.selectedTasks)
}
expects an array of task objects
Where value={{task.id}} passes ["7", "8"] and value={{task}} passes ["[object Object]", "[object Object]"]
This results in my backend throwing BAD REQUEST error. I want to pass something like [{..},{..}] this from value.
How to achieve this?
Use it .map
selectedTasks:any = [];
arrangeSelectedTasks(){
this.addScenarioForm.value.tasks.map(task => {
this.selectedTasks.push({task.id});
});
console.log("selectedTasks: ", this.selectedTasks)
}
Related
I have a field which opens a list having ion-radio.On selection of an option it shows the selected value as checked and when i open the list again, the checked value is not shown.
here is my code:
code to show the options in modal controller :
let modal = this.modalCtrl.create(ListComponent, { selectEmpType: type, selectValue: value, customiseColor: this.customiseColor , formMrType :formMrType, limitedRoleList : this.limitedRoleList, formType:this.formType,defaultOU1:this.defaultOus[0],defaultOU2:this.defaultOus[1],defaultOU3:this.defaultOus[2]});
modal.onDidDismiss(data => {
if (data.type == 'single') {
this.setEmpValue(data.data, name); //data.data is the value that is selected from the list
}
}
in listcomponent.html:
<div *ngIf= "formMrType =='employee'">
<ion-list radio-group [(ngModel)]="relationship">
<ion-item *ngFor="let option of inputDatas">
<ion-label>{{option.EMPFullName}}</ion-label>
<ion-radio [checked]="option.checked" value="{{option.EMPFullName}}"></ion-radio>
</ion-item>
</ion-list>
</div>
how to show the selected option as checked when opening the list for second time.
Preferably, you should be using ion-select for such functionality..
If you are using latest ionic versions ion-radio-group
But even in your case..you can try something like this...
<ion-radio [checked]="option.checked" value="{{option.EMPFullName}}" (ionBlur)="optionBlur(option)"></ion-radio>
optionBlur(option){
if(!option['checked']){
option['checked'] = true;
}
else{
option['checked'] = !option['checked']
}
}
I created an app with a register form in ionic 4 and angular. I want to do the following:
I have two ion-selects, one is for a countries list and that another is for phone codes list. The behavior i am looking for is: when a country is selected in the ion-select for countries, the corresponding telephone code must be selected automatically in the phone code ion-select.
This is my code:
ion-select for countries
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event)" interface="popover">
<ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
</ion-select>
ion-select for phone code
<ion-select formControlName="phonecode" placeholder="Cod." interface="popover">
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
</ion-select>
Here is the function i am using to update the phone code ion-select
changeselect($event){
console.log($event.target.value) ;
let item1 = this.countries.find(i => i.cod === $event.target.value);
console.log(item1) ;
this.codigoselected = item1.code;
console.log(this.codigoselected) ;
}
I am using the variable "codigoselected" to determine which country is selected. for this, in the ion-select-option i am using a condition to change the selected status of the option like this:
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
The current behavior is like this:
I selected a country:
But the ion-select for phone codes seems not to be updated
But when I click on the field, the specific code is selected
I need to do clic under option is selected in order to field be refreshed:
So, how can I make the field for phone codes update automatically in the interface without the user clicking?
Try this, pass the phone code select element to your changeselect(event, phoneCodeSelect) function.
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event, phoneCodeSelect)" interface="popover">
<ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
</ion-select>
Add #phoneCodeSelect to your phone code select element.
<ion-select #phoneCodeSelect formControlName="phonecode" placeholder="Cod." interface="popover">
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
</ion-select>
Then in your function change the value of the select element manually, while also updating the phoneCode form control value.
changeselect($event, phoneCodeSelect){
console.log($event.target.value) ;
let item1 = this.countries.find(i => i.cod === $event.target.value);
console.log(item1) ;
this.yourFormGroup.value.phonecode = item1.code; // change yourFormGroup to what your variable's name is
phoneCodeSelect.value = item1.code;
}
So I know how to get the selected value using the ionChange event, but how do I get the selected index. For example if i was to select the 3rd value down in a dropdown how can I get the selected index (2) rather than the value selected?
You can do something like ths:-
<ion-select placeholder="Select One">
<ion-select-option value="id1">Value1</ion-select-option>
<ion-select-option value="id2">Value2</ion-select-option>
</ion-select>
By this when you will select any particular option, then on its change event you will get that object's id instead of the value in the controller.
I hope it helps.
This is what you can do to get the id. Add a local variable to your ion-select #selectedIndex. After add your value like this [value]=[prices.w, id]
<ion-select slot="end" (ionChange)="changePrice($event)" #selectIndex>
<ion-select-option text-uppercase [value]="[prices.w, id]" *ngFor="let prices of prodData?.prices; let id = index" >{{prices.w}}</ion-select-option>
</ion-select>
In your ts. Import ViewChild
import { Component, OnInit, ViewChild } from '#angular/core';
After reference your local variable
#ViewChild('selectIndex') selectedId: ElementRef;
then declare your ionChange() function changePrice(event) and add the following code
public changePrice(event) {
const childCount = this.selectedId['el']['childElementCount'];
this.selectedId['el']['childNodes'][`${childCount}`]['defaultValue'] = event.detail.value[0];
this.selectedId['el']['shadowRoot']['children'][1]['innerHTML'] = event.detail.value[0];
this.selectedId['el']['shadowRoot']['children'][1]['innerText'] = event.detail.value[0];
console.log(event.detail.value[1]);
}
logs your index
console.log(event.detail.value[1]);
Hope it works fine
I am developing an Ionic application (v.4 final release)...
My problem:
I have an <ion-select> and this select has a list of <ion-select-option>, and this options was created doing *ngFor... the problem is: when I change the array, remove an element, for example, the ionc-select-options cannot re-render the new status of this array.
<ion-select>
<ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>
(I am updating questions array)
Any ideas?
UPDATE:
If a put the *ngFor in other element, like a div, it works fine:
example:
(It is no updating when I delete the first element)
<ion-select>
<ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>
<button (click)="deleteFirst()>Delete first!</button>
(It is updating when I delete the first element)
<div *ngFor="let question of questions"></div>
<button (click)="deleteFirst()>Delete first!</button>
class MyComponent() {
public questions = ['question1','question2','question3'];
deleteFirst() {
this.questions.splice(0, 1);
}
}
You are using splice method alters the content of an array but doesn't change its reference.
In other words, you should work with immutable objects/Array, and create new instances when you need to make a change.
In your case :
deleteFirst() {
if (this.questions.length) {
this.questions = this.questions.filter((el, index) => index > 0);
}
}
Here filter returns a new reference to an array containing objs that fulfill a condition
I don't know if you get the idea. What I want to do is having an ion-select with option, and when user selects, for example, "Albania (+355)" and press OK button, in the select will only be displayed "+355" instead of "Albania (+355)"
add-contact.html
<ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" placeholder="País">
<ion-option [value]="countries" *ngFor="let countries of country">
{{countries.country_name}} ({{countries.dialling_code}})
</ion-option>
</ion-select>
add-contact.ts
country = [{ "country_code": "AL", "country_name": "Albania","dialling_code": "+355" },
{ "country_code": "DZ", "country_name": "Algeria", "dialling_code":"+213" }];
This is what I have:
name-code-displayed
This is what I try to display: only-code-displayed
According to the Documentation,
ion-select has an input property selectedText which:
The text to display instead of the selected option's value.
You can try using [selectedText]="selected_value.dialing_code".
<ion-select [(ngModel)]="selected_value" (ionChange)="getCountry(selected_value)" [selectedText]="selected_value.dialing_code">
<ion-option [value]="countries" *ngFor="let countries of country">
{{countries.country_name}} ({{countries.dialing_code}})
</ion-option>
</ion-select>
I could also use the statement of the ionChange event as follows:
(ionChange)="getCountry($event)"
In this way, the component captures the value that is selected in the select to then process the information you want to display.