I'm using ion-select component in a form, but got a problem: if users selects one option, but then wanna remove it, it doesn't give the option. I could add a <ion-option> with blank value, but think it wouldn't be nice. Is there a better way to solve that?
EDIT:
This is how my select options looks right now:
If the users selects one option and then changes his mind and don't wanna select any option, it doesn't seems pretty clear the way he can do that. Even if add a "Remove Option" with blank value, it still looks like an option, doesn't seems nice to me. With a traditional select, the blank option without a text seems pretty intuitive. But in this case, I was thinking in something like a " (X) Remove selected", near to "Cancelar/Confirmar" options in the footer, or something like that. Any ideas?
Ps: also, ion-option seems to strip any html tag I put on my option, so it keeps pretty tough to format my "select none" option
#sonu's solution will work if the user wants to click on the ion-select again and chose a select-nothing option, but I don't find that a pleasant experience.
An alternative way to get to what you want is to use a small clear button next to your ion-select, which appears only when user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
</div>
Where removeSelection() is a function that changes the selection to "No selection", perhaps by setting this.option=null.
Of course, you can style this button as you wish. You may also want to look at ionic chips. In particular, delete chips are one way to implement your intention.
To trigger a function that handles the cancel selection you can just use the ionCancel attribute like this
<ion-select okText="Select" cancelText="Clear"formControlName="selectionValue" (ionCancel)="clearSelection()">
<ion-option *ngFor="let selection of selections" [value]="selection.value">{{selection.description}}</ion-option>
</ion-select>
And in the code just implement the function you declared; in this case clearSelection()
clearSelection() {
this.myModel.selectedValue = null;
}
Now every time you press the clear button your function will be triggered
Documentation: ion-select
I had a slight different requirement - after selecting an option and clicking on OK button, the selected value should be used in function called by ionChange and then selected option in ion-select should get deselected. I tried various solutions mentioned in various sites but none worked. Even the working solution in plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview where the ngModel value is set to null didn't work for me.
So I tried myself different things and one them did the trick. Below is the way that worked for me:-
In HTML I have used #languageSelect as template reference variable for ViewChild in ion-select
<ion-label>Select Language</ion-label>
<ion-select #languageSelect (ionChange)="langSelected($event)">
<ion-option *ngFor="let lang of languages" [value]="lang">{{lang}}</ion-option>
</ion-select>
And in ts file it is used as
#ViewChild('languageSelect') languageSelect: Select;
In langSelected() it is cleared after doing the needful.
langSelected(value) {
//used the value as required
...
...
this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}
It's better way to have option with blank value.You can use code as per ionic docs
example:
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="">Select Gender</ion-option>
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
Or you can add any event for selection clear.
Related
I want to set a default value or prompt a text to my select dropdown, I have managed to get the correct content into the select, but I want to be able to have a default value that differs from the content, for example " select country " and then list the countries.
This is how the select looks like so far, and the testing variable looks like this: testFillSelect: "Select Country..",
<div class="form-group">
<label>Countries:</label>
{{view "select2"
prompt="Select country.."
content=countries
optionValuePath="content.id"
optionLabelPath="content.name"
selectionBinding=testFillSelect
selection=countries.id
class="form-control"}}
</div>
The problem is, the selectionBinding doesn't seem to work as it does nothing, and niether does the prompt unless it's a blankspace in a string. I have tried select and select2, didn't make any difference either.
Does anyone have any idea of how to do this properly?
I thought I'd just leave an answer here in case anyone stumbles upon the same problem in the future, with this ember version.
Inspired by Lux comment, I passed an object as the first object in the content array instead, I did this using unshiftObjects which is supported by this ancient ember version believe it or not. (The first object is what is shown in the select if there's data in it & there's no prompt in the select view)
Code example of what I did:
this.set('countries', countries.unshiftObjects({id:-1, name:"Select country.."}));
And a validation that checks if a post is made with id -1 and in that case treat it as if nothing was selected.
Note that there are probably better ways to go about this & this is a workaround, but it's what worked for me :)
What is the easy way to add a clear (x) button to an input field in ionic 2? It's supposed to delete the entered content.
<ion-item>
<ion-label>Clear Icon</ion-label>
<ion-input placeholder="Clear Input" clearInput></ion-input>
</ion-item>
Just add a clearinput attribute to your inputs and it'll show an x button in the right side of input.
There's also a clearOnEdit attribute which clears the input when the user focuses on it again.
Hope this helps
I am trying to select the radio button for the freelancer the code is as follows (when we inspect the element on browser)
<label for="registration_payer_type_business"><input checked="checked" id="registration_payer_type_business" name="registration[payer_type]" type="radio" value="business">
Company
</label>
<label for="registration_payer_type_freelancer"><input id="registration_payer_type_freelancer" name="registration[payer_type]" type="radio" value="freelancer">
Freelancer
</label>
I have tried
page.choose("registration_payer_type_freelancer")
This doesn't give any error but when and save and open page in capybara still the radio box is not selected against freelancer. I would appreciate if people can give example using xpath and choose.
The real issue you're most likely having is that save_and_open_page saves the HTML with the current attribute values NOT the current property values . This means the fact that you've selected a radio button (which changes the checked property value, not attribute value, won't necessarily be shown). You're better off using save_and_open_screenshot if you want to see the current state of a page. That being said below is ways you can select radio buttons.
To select a specific radio button with Capybara you can use the id, name, label text, and value too if needed to make unique (with name for instance)
choose('registration_payer_type_freelancer') # id
choose('registration[payer_type]', option: 'freelancer') # name and value to make unique
choose('Freelancer') # label text
choose(option: 'freelancer') # just value if the only radio button with that value
In all those cases, if the actual radio button input element is non-visible (for styling purposes, etc) on the page and you want to instead click the visible label you can pass allow_label_click: true
choose('registration_payer_type_freelancer', allow_label_click: true) # find by id and select by clicking the label if input is non-visible
Other options you could use is to just find by CSS (the :css argument can be ignored if your default selector type is the default :css)
find(:css, '#registration_payer_type_freelancer').click
You could also use XPath queries to locate the element, but they're really not necessary 98% of the time (more people correctly understand CSS and with scoping of finders it can generally be used to get any element), and have issues to be aware of - https://github.com/teamcapybara/capybara/blob/master/README.md#beware-the-xpath--trap
find(:xpath, './/input[#value="freelancer"]').click
This ionic page is just a form with some elements. In the Phone field, I have created a modal that opens when you click on an image:
<ion-grid>
<ion-row>
<ion-col>
<form #registerForm="ngForm" novalidate [formGroup]="form">
[...]
<ion-item>
<img item-left margin-left src={{flagPath}} (click)="presentCountryModal()">
<p item-left (click)="presentCountryModal()">+{{countryCode}}</p>
<ion-icon item-left name="arrow-dropdown" (click)="presentCountryModal()">
</ion-icon>
<ion-input
placeholder="Phone"
type="text"
[(ngModel)]="account.phone"
name="phone"
required
pattern=".{8,}"
#phone="ngModel"
></ion-input>
</ion-item>
It works perfectly on iOS and Windows on ionic-lab. But in Android the behavior is different: when I click on the image, the Phone ion-input gets the focus and the whole form moves up, making space for the keyboard and hiding the field under the header.
I'd like to:
1) Be able to make the image clickable.
2) Disable the automatic scrolling when an ion-input gets focused. I've tried keyboard.disableScroll(true) with no success.
Any ideas? Thanks!
UPDATE:
As explained here, adding .input-cover { position: static; } to the scss files stabilizes the form and makes the image click event responsive! So that solves the first question.
But I still have the problem that, when the keyboard opens, the whole page moves up and the top elements hide below the header (and you can't scroll them down).
1) You need to make a separated ion-item form the img. If you have an ion-input inside an ion-item, everything you put together will be "part" of that input.
2) The easiest way to do this without manipulating via ts is using a regular input, not the ion-input or using the ion-input inside a div instead of the ion-item. The second one i'm just guesing, since the behaviour of the scroll for showing the keyboard happens if you have an ion-input inside ion-item.
Hope this helps :)
The template:
<ion-item>
<ion-label stacked>Select clickable option texts</ion-label>
<ion-select>
<ion-option value="opt1"><a (click)="myDetails()">Option one description<a> text</ion-option>
</ion-select>
</ion-item>
As you can see above, I want to make certain parts of the text in clickable, like to show the definition. I am using toast to show the text. But I am unable to get my head around making part of the text actually clickable.
Is there a way?