I would like to know if exists any option of trigger a function when you fill some data from a specific div:
<div (ionChange)="Trigger()">
<ion-select [(ngModel)]="ListRooms" (ionChange)="GetRoomId($event)">
<ion-option *ngFor="let room of rooms" value="{{room.ID}}">{{room.DESCRIPTION}}</ion-option>
</ion-select>
<ion-item>
<ion-label>DATE</ion-label>
<ion-datetime [(ngModel)]="room_date" displayFormat="DD/MM/YYYY"></ion-datetime>
</ion-item>
</div>
Related
I have bind the values through formController but it does not bind the correctly,
this is how i bind the values on .ts file
this.rental.setValue(scheme, { emitEvent: false, onlySelf: true });
this is the relevant HTML
<ion-item>
<ion-label position="floating"> SCHEME</ion-label>
<ion-select placeholder="Select" formControlName="rental" interface="popover">
<ion-select-option *ngFor="let scheme of product" [value]="scheme">
<p class="color-gray font-12 text-align-right bold">
{{scheme.description}}
</p>
</ion-select-option>
</ion-select>
</ion-item>
product is an object array
Also use value tag in ion-select
<ion-select placeholder="Select" [value]="myVar" formControlName="rental" interface="popover">
Ref : https://ionicframework.com/docs/api/select
Also you can use ngModel tag in ion-select, Like
<ion-select placeholder="Select" [(ngModel)]="rental" interface="popover">
<ion-select-option *ngFor="let scheme of product" value="scheme">
<p class="color-gray font-12 text-align-right bold">
{{scheme.description}}
</p>
</ion-select-option>
</ion-select>
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'm new in Ionic and I want to create list in which in each ion-item there will be checbox and when user checks it then select will appear in new line but still within ion-item. I've tried to use ion-item inside ion-item but then select wasn't showing. I've read that there is some issue with nested ion-items so I replaced first ion-item with ng-container but after that all layout looks terrible. What should I do?
<ion-list>
<ng-container *ngFor="let filter of filters">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked" (ionChange)="onCheckboxChange($event, filter)"></ion-checkbox>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ng-container>
</ion-list>
I figured it out - in ion-list I put ion-card-content with ngFor as a wrapper for ion-items. Works and looks good!
<ion-list>
<ion-card-content *ngFor="let filter of filters" class="card-wrapper">
<ion-item class="checkbox-item">
<ion-label> {{filter.name}}</ion-label>
<ion-checkbox item-right [(ngModel)]="filter.checked"></ion-checkbox>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="option">
<ion-option *ngFor="let option of filter.data" [value]="option">{{option.name}}</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-list>
As different option has different information to input I want to ask how can I have additional ion-item after an option is selected from ion-select.
These are my codes:
<ion-item>
<ion-label class="lbReward" color="dark" >Reward Type: </ion-label>
<ion-select (ionChange) = "onChange()" okText="Okay" cancelText="Dismiss" placeholder= "Select Type" formControlName = "rewardType" [ngModel] = "selectedRewardType">
<ion-option value="priceDiscount">Total Price Discount</ion-option>
<ion-option value="categoryDiscount">Category Price Discount</ion-option>
<ion-option value="freeGiftwithPrice">Sufficient Price Free Gift</ion-option>
<ion-option value="freeGiftwithMeal">Meal with Free Gift</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label color="dark" >Discount Percentage: </ion-label>
<ion-input name= "discountPercent" type="text" formControlName = "discountPercent"> </ion-input>
</ion-item>
I want to show the Discount Percentage only after I select Total Price Discount. Is there a way?
Add *ngIf statement to your <ion-item>
<ion-item *ngIf="selectedRewardType && selectedRewardType.length > 0">
<ion-label color="dark" >Discount Percentage: </ion-label>
<ion-input name= "discountPercent" type="text" formControlName = "discountPercent"> </ion-input>
</ion-item>
I have a form with product rate and quantity inputs. I need to calculate the value (rate * quantity) and assign the value to amount input field.
Please find the code snippet below:
<form [formGroup]="additemForm" (ngSubmit)="submit(additemForm.value)" >
<ion-row>
<ion-col>
<ion-list inset>
<ion-item>
<ion-label>Product :</ion-label>
<ion-select formControlName="product">
<ion-option *ngFor="let product of productArray" value="{{product.code}}" selected="false">{{product.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value"></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="signup-col">
<button ion-button class="submit-btn" type="submit" [disabled]="!additemForm.valid">Submit</button>
<button ion-button type="button" (click)='cancel()' >Cancel</button>
</ion-col>
</ion-row>
</form>
You need to use [(ngModel)] for this.
<ion-item>
<ion-label>QUANTITY :</ion-label>
<ion-input type="number" formControlName="qty" [(ngModel)]="quantity"></ion-input>
</ion-item>
<ion-item>
<ion-label>RATE:</ion-label>
<ion-input type="number" formControlName="rate" [(ngModel)]="rateValue"></ion-input>
</ion-item>
<ion-item>
<ion-label>Value :</ion-label>
<ion-input type="number" formControlName="value" [(ngModel)]="rateValue * quantity"></ion-input>
</ion-item>
Now, still amount input field will be edible after this. And changing this value will affect the other 2 input values also. You can disable the input, so it will appear as a read-only input. This worked in my code.