I would like to make my ion-select a required input of the form, but it does not work like this. I do not use Angular or React.
<ion-select id= "id1" required>
//...
</ion-select>
Add a template reference to your ion-select named id1
<ion-select id= "id1" #id1 >
//...
</ion-select>
Access this ref to Typscript class:
#ViewChild("id1") id1!: IonSelect;
Return to html page to check if it has a value to validate your submit button.
<ion-button [disabled]='!!id1 && !!id1.value'>Submit</ion-button>
Related
I am using Reactive form as shown below.
HTML file
<ion-select formControlName="gender" (ionChange)="onGenderChange($event)">
<ion-select-option value="1">Male</ion-select-option>
<ion-select-option value="2">Female</ion-select-option>
</ion-select>
TS File
I want to get the selected text (Male or Female) instead of its value. Below is on Change event of select dropdown.
onGenderChange(event) {
console.log("onGenderChange : ", event.detail.value); //its return only value
}
Please help me to solve this.. Thanks in advance.
It will depend on what type of data you'll get from your backend but you can choose what to use as value and as text with data binding.
For example in my .ts page file I created this data with your function :
myData = ["Testing", "Testing 2", "Testing 3"]
onGenderChange(event) {
console.log("onGenderChange : ", event.detail.value); //its return only value
}
And with data biding I could use this array as I want in the .html page
<ion-item>
<ion-label>Gender</ion-label>
<ion-select formControlName="gender" (ionChange)="onGenderChange($event)">
<ion-select-option value="{{myData[0]}}">{{myData[0]}}</ion-select-option>
<ion-select-option value="{{myData[1]}}">{{myData[1]}}</ion-select-option>
<ion-select-option value="{{myData[2]}}">{{myData[2]}}</ion-select-option>
</ion-select>
</ion-item>
and in the console you'll get "onGenderChange : Testing 2"
In my ionic select i got output like small down arrow rather than a full select tag and for input tag just a blank space. I can enter data but UI not looks good. Is there any css i need to add.
<ion-card class='sc-ion-card-md-h'>
<ion-card-header>
<ion-card-subtitle>Name:</ion-card-subtitle>
<ion-card-title>
<ion-select #inputName id="username" class="form-control">
<ion-select-option>SELECT</ion-select-option>
<ion-select-option>Monicka</ion-select-option>
<ion-select-option>Hema</ion-select-option>
<ion-select-option>Ramesh</ion-select-option>
<ion-select-option>Madhavan</ion-select-option>
<ion-select-option>Aadhavan</ion-select-option>
<ion-select-option>Madhan</ion-select-option>
<ion-select-option>Prasanth</ion-select-option>
</ion-select>
</ion-card-title>
</ion-card-header>
<ion-card-header>
<ion-card-subtitle>Date:</ion-card-subtitle>
<ion-card-title>
<ion-input type="text" #inputDate id="date" class="form-control"></ion-input>
</ion-card-title>
</ion-card-header>
</ion-card>
Output looks like this...
It seems like you are trying to convert a Bootstrap form over to Ionic and you are bringing some jQuery thinking along with it.
This is how you would do it with an Ionic page:
page.html
<ion-header>
<ion-toolbar>
<ion-title>card-select</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-list>
<ion-item>
<ion-label position="stacked">Name:</ion-label>
<ion-select [(ngModel)]="username" placeholder="SELECT">
<ion-select-option>Monicka</ion-select-option>
<ion-select-option>Hema</ion-select-option>
<ion-select-option>Ramesh</ion-select-option>
<ion-select-option>Madhavan</ion-select-option>
<ion-select-option>Aadhavan</ion-select-option>
<ion-select-option>Madhan</ion-select-option>
<ion-select-option>Prasanth</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">Date:</ion-label>
<ion-input [(ngModel)]="date"></ion-input>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
page.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-card-select',
templateUrl: './card-select.page.html',
styleUrls: ['./card-select.page.scss'],
})
export class CardSelectPage implements OnInit {
username: string;
date: string;
constructor() { }
ngOnInit() {
}
}
notes
You don't need all those classes you put on.
Using label position="stacked" puts it above the input.
You dont need to bind the name like #username or id="username". What you do is put a variable on the page behind it and then use ngModel to bind to it. Any change that is made to the user interface (typing into a box, selecting an option) is then automatically set to the variable in the page. This works both ways because of the [()] syntax, so if you change username with something like this.username = "superman"in the code then the input box on the page will automatically update to match that value as well.
You don't need type="text" on the input, its the default.
You can use the placeholder attrib to pass some SELECT text instead of having an extra select option.
I have 2 select in ionic 2 and i am able to dynamically populate the second based on the value selected in first. but i cannot set the selected default option after the population. i tried:
<ion-item>
<ion-label>City</ion-label>
<ion-select (ionChange)="setCity($event)">
<ion-option selected >City1</ion-option>
<ion-option >City2</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Zona</ion-label>
<ion-select >
<ion-option *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
</ion-item>
in .ts
this.locations = {'City1':[{ zone: 'Zone1', selected: true},{zone:'Zone2', selected: false}],
'City2': [{zone: 'Zone3', selected: false} {zone:'Zone4', selected: true}]}
setCity(event){
this.city = event;
}
there is no selected value after the second ion-select is populated
thank you.
Try setting the ngModel attribute in ion-select and value attribute in ion-option like below
<ion-label>Zona</ion-label>
<ion-select [(ngModel)]="mLocation" >
<ion-option [value] = "location" *ngFor ="let location of locations[city]"
[selected] = location.selected >
{{location.zone}}
</ion-option>
</ion-select>
Create a change event handler on the first select element. Then have that call a method, passing the selected value with it. Then do some checks on the selected values to determine if you want to show the next select and then the list.
Check out this StackOverflow question How to show second dropdown data based on previous dropdown selection
Working version: https://embed.plnkr.co/Qu1lL6PDIX2DTDGv01ZI/
UPDATE Display Default selected item
You wanna display Default selected item then you need to add these few line in your html page
like that:
<ion-label>District</ion-label>
<ion-select (ionChange). ....
<ion-option [value]="0" >select District</ion-option>
<ion-option [value]="sDistrict" *ngFor = ...
</ion-select>
and add these line in your type script(.ts) file
export class HomePage {
....
sState: number = "0";
sDistrict: number = "0";
.....
}
if you face any problem then let me know.
I want to make the first item in the list to be always checked but checked="true" does not seem to be working
<ion-item>
<ion-label class="label">Change City</ion-label>
<ion-select checked="true" [(ngModel)]="cityName"(ionChange)="getCity()">
<ion-option class="option" *ngFor="let city of City" value='{{city.cname}}' >{{city.cname}}</ion-option>
</ion-select>
</ion-item>
you should remove checked="true" from ion-select and try to checked from the .ts file like this:-
export class MyClass {
constructor() {
this.cityName= '**your city name**';
}
}
Note:- checked="true" not working because you used this in
ion-select so, inside the ion-select all option are occur.So it can't
get which option you want to check from ion-select.
Using model driven form to select default option, so residence is already set:
<ion-select formControlName="residence">
<ion-option [value]='"0"'>{{freeCalcForm.controls.partyAName.value}}</ion-option>
<ion-option [value]='"1"'>{{freeCalcForm.controls.partyBName.value}}</ion-option>
</ion-select>
I don't see the selected value:
But clicking on the ion-select shows that the value is already selected correctly:
I tried selected="true" and selected="selected" on first option without any effect.
You should bind a model to your select:
<ion-select [(ngModel)]="myModel">
and set your default selection in the model. For example:
// page.html
<ion-select [(ngModel)]="gender">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
// page.js
export class BasicPage {
gender: string = "f";
}
Example truncated from here.