Need to pass the value of selected radio button upon clicking the submit button
<!--Starts Location Select Popover -->
<ion-list>
<ion-list-header>
<h5> Select Location</h5>
</ion-list-header>
<ion-item *ngFor="let store of storeLocations">
<ion-label>{{store?.storeName}}</ion-label>
<input type="radio" slot="end" value="{{store}}" />
</ion-item>
<ion-button expand="block" (click)="dismissLocationSelectPopover(store)">Submit Location
</ion-button>
</ion-list>
<!--Ends Location Select Popover -->
[(ngModel)] is not supported. Better to use (click) instead.
HTML
<input type="radio" slot="end" value="{{storeLoc.storeName}}" id="{{storeLoc.storeName}}"(click)="storeSelected(storeLoc)" />
TS
storeSelected(storeLoc) {
this.storeSelected = storeLoc;
}
Related
I currently have this ion-select where once I click it it goes to the next page but it still shows the ion-select-option.
How do I remove it and get data from the next page back to the previous page?
here is what it looks like right now
<ion-select value="1" (click)=gotoClass()>
<ion-select-option value="1" selected=true>1</ion-select-option>
</ion-select>
</div>
and the next page
<ion-content>
<ion-radio-group>
<ion-item>
<ion-list>1</ion-list>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-list>2</ion-list>
<ion-radio value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-list>3</ion-list>
<ion-radio value="3"></ion-radio>
</ion-item>
<ion-item>
<ion-list>4</ion-list>
<ion-radio value="4"></ion-radio>
</ion-item>
<ion-item>
<ion-list>5</ion-list>
<ion-radio value="5"></ion-radio>
</ion-item>
You can use ion-select (ionChange) event like below:
<ion-select #ionselect value="1" (ionChange)="onSelectChange($event)">
<ion-select-option value="1" selected=true>1</ion-select-option>
</ion-select>
.ts file:
#ViewChild(ionselect) ionselect:Select;
onSelectChange(selectedValue: any) {
//Before pushing to next dismiss your ion-select
this.ionselect.close();
//Push your new view here like
this.navCtrl.push(YourNextPage, {});
}
Before navigating to next screen you can close your ion-select.
Hope this will helps!
I am working in my Ionic 4 app and I have a form in that my keyboard enter is not working in Android.
This is my signin.page.html:
<form [formGroup]="userlogindet" (ngSubmit)="UserLoginDetails()">
<ion-list>
<ion-item class="newitem2">
<ion-input placeholder="Email*" type="email" formControlName="email"></ion-input>
</ion-item>
<p *ngIf="userlogindet.get('email').errors && userlogindet.get('email').dirty && userlogindet.get('email').touched"
class="myp2">EMAIL_NOT_VALID</p>
<ion-item class="newitem2">
<ion-input placeholder="Password*" type="password" formControlName="password" required></ion-input>
</ion-item>
<ion-input type="hidden" formControlName="social_type" hidden></ion-input>
</ion-list>
<ion-button [disabled]="!userlogindet.valid" class="mybtn1" type="submit" color="danger" (keyup.enter)="enablelogintracking()" expand="full" fill="solid">Login
</ion-button>
</form>
In this html file, I have a signin page in which I have the login button but it is not working when using the keyboard enter.
I have also used the (keyup.enter) after that also it is not working.
Any help is much appreciated.
I am working In Ionic App and I have shown the item list in which I have the checkbox for the item selection. User can select only one item but the problem is that, In my item list user is able to select all items.
This is my shopping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
In this, I am showing the check-boxes with the items where user can select the item.
This is my shopping.ts:
isCheckboxDisabled:boolean=false;
selectCP(itm){
}
I am not able to make the logic for that. In my html, user can select all the items. Any help is much appreciated.
You may use ion-radio instead.
<ion-list>
<ion-radio-group>
<ion-item *ngFor="let itm of shippingdetails">
<ion-label>{{itm.name}}</ion-label>
<ion-radio value="{{itm.id}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
I'm learning Ionic 3 and I want create a dynamic form.
A dynamic form for me is a form that increases when I press a FAB button (like alarm native app in Android), I read dynamic forms in angular page but I think it's not what I'm looking for.
This is my code, but I think my base idea is correct, it's possible create something like this in Ionic 3?
<ion-list id="horario-list9">
<ion-item-divider color="light" id="horario-list-item-divider3">
<ion-list-header>
<h2>{{titles[0]}}</h2>
</ion-list-header>
</ion-item-divider>
<ion-item id="horario-range1">
<ion-range style="padding-left:0px" [(ngModel)]="quantity1" min="0" max="6" step="1" color="balanced" value="0" name="ration1">
<ion-icon range-left>
<img src="assets/imgs/cup.svg" alt="" height="40px" width="40px">
</ion-icon>
<ion-label range-right>
<div *ngIf="quantity1; else other_quantity1">
<p style="font-size:40px;color:#AED581">{{quantity1/2}}</p>
</div>
<ng-template #other_quantity1>
<p style="font-size:40px;color:black">0</p>
</ng-template>
</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="md-time" style="font-size:50px"></ion-icon>
</ion-label>
<ion-datetime style="font-size:40px" displayFormat="HH:mm" pickerFormat="HH mm" [(ngModel)]="event.timeStarts1"></ion-datetime>
</ion-item>
<div class="spacer" style="width:300px;height:30px;" id="horario-spacer6"></div>
<ion-fab center>
<button ion-fab color="secondary"><ion-icon ios="ios-add" md="md-add"></ion-icon></button>
</ion-fab>
</ion-list>
This look like this My form in Safari
I want create a dynamic form, I need when I press my green button add new ion-item in my list, it's possible? Angular documentation failed to explain this question
To get user ratings I am using a ion-range component inside a form. Though it is a required field system allow to save reviews without set the rating value.
<ion-content>
<form #Form="ngForm" (ngSubmit)="save()" >
<ion-item>
<ion-range min="0" max="100" pin="true" [(ngModel)]="rating" [ngModelOptions]="{standalone: true}" required>
<ion-icon range-left name="sad"></ion-icon>
<ion-icon range-right name="happy"></ion-icon>
</ion-range>
</ion-item>
<button ion-button [disabled]="!Form.form.valid" ion-button full color="secondary" >Save</button>
</form>
</ion-content>
What is the reason behind this?
The required attribute is not part of the Range component, so it won't work in that way.
What you can do, is to add another condition to the disabled attribute of the button, like this
<button ion-button [disabled]="!Form.form.valid || rating === 0" ion-button full color="secondary" >Save</button>
This way the button will still be disabled if the rating property is equal to 0.