Search Posts

Category: ionic2

Ionic – Can’t get value of ion-input when there is *ngIf in tag <form>

I’m building an hybrid app using Ionic3+AngularJS, and I’m stuck on this: I have a form and I only want it to appear depending on a condition in controller. Controller: export class ClassName implements OnInit{ private show: boolean = false; ngOnInit(){ if(someCondition){ this.show = true; } } } View: <ion-content> <button ion-button small block full color=”danger” (click)=”sum(discount.value)”>Cancelar</button> <form *ngIf=”show”> <ion-list> <ion-item> <ion-label floating>Discount ($)</ion-label> <ion-input #discount type=”number”></ion-input> </ion-item> </ion-list> </form> The problem is that when […]

Barcode scanner with more than one field in Ionic 2

My barcode scanner plugin Typescript file scanBarCode() { this.barcodeScanner.scan().then(barcodeData => { this.scannedbarCode = barcodeData.text; }, (err) => { console.log(‘Error: ‘, err); }); } clearbar(){ this.scannedbarCode= null; } My HTML side of barcode scanner <ion-item *ngIf=’item.datatype == “barcode”‘> <ion-label floating><b>{{item.label}}</b></ion-label> <button ion-button small item-right color=”primary” (click)=”scanBarCode()”>Scan Barcode</button> <button ion-button small item-right color=”danger” (click)=”clearbar()”>Clear</button> <ion-input type=”text” value={{scannedbarCode}}></ion-input> </ion-item> If i scanned barcode one the same value comes on the second barcode value.Is there is any to avoid […]

Iteration through JSON data in Ionic 2

My JSON array look like this [{ label: “Hobbies”, datatype: “check”, lookupname: “null”, order: “05”, options: [ 0:{id: “01”, value: “Music”} 1:{id: “02”, value: “Sports”} 2:{id: “02”, value: “Travelling”} 3:{id: “02”, value: “Reading”} ] }] I want a dropdown when click on hobbies with values in options My HTML code <ng-template ngFor let-item [ngForOf]=”main2″> <ion-item *ngIf=’item.datatype == “check”‘ > <ion-label floating>{{item.label}}</ion-label> <ion-select> <ion-option>{{item.options.value}}</ion-option> </ion-select> </ion-item> </ng-template> Note: main2 is my main array which contain so […]

How to validate template driven form inside table with different fields?

In my ionic-angular application I am using Template driven forms, When I submit the form without touching the input fields it should display the error message, but in this case I am not able to display the error message in the span. You can see the comments in which the error-message is written. How do I validate this form? Page.html <form (ngSubmit)=”submitForm()” #form=”ngForm”> <table> <tr> <td> <ion-input type=”text” #c1 [(ngModel)]=”c” name=”c” required> </td> <td> <ion-input […]

multiple select fields in form group

I have using formGroup which have 2 select fields of “@angular/forms”: “5.0.1”, but I can just select field 2, I try to select field 1 but it show data of field 2. here is my form: <form class=”form” [formGroup]=”myForm”> <ion-select formControlName=”first” id=”pop-country” name=”pop-country” (ngModelChange)=”selectEvent($event)”> <ion-option value=”” disabled selected>Please select country</ion-option> <ion-option *ngFor=”let item of listFirst” [value]=”code”>{{ display }}</ion-option> </ion-select> <ion-select formControlName=”second” id=”pop-code” name=”pop-code”> <ion-option value=”” disabled selected>Code</ion-option> <ion-option *ngFor=”let item of listSecond” [value]=”code”>{{ display }}</ion-option> […]

Ionic how to display result from .ts file?

I have created an application, and I get the data from my API, after that I successfully do all the calculation, and the answer is saved inside a variable inside my .ts file show in below getApiData_record() { this.restProvider.getApiData_record().then(data =>{ this.users = data; var totalDuration=0; var fee1 = []; for (var i of this.users){ fee1.push(i.fields.duration); } for (var j=0; j < fee1.length; j ++){ console.log(“here”, fee1[j]) totalDuration = totalDuration + fee1[j]; } console.log(“Record Here”, data, […]

**Ionic-Angular** HTML selected option won’t change even when being chosen!!! :(

In short, I have a page with a JS Google map and a control (select dropdown). Let’s say that this page is the 3rd page users would get to while following the application flow. After selecting an option from the dropdown (the value for ex, abc), they would be navigated through a few more pages before going back to the root page (not by hitting back button or swipe back but directly from the last […]

Remove modal from page in Ionic 2

I want to remove the modal that has been added to the nav stack from the previous page. For example, I nav.push user to a page then from that page the user opens a modal. I have a Observable.timer inside the page and it triggers a nav.push when countdown reaches 0, so when this happens I want to close all modals opened when it is triggered? How do I close a modal opened from a […]

Create callback in Ionic 2 for Observable.timer

I have a Observable.timer function that creates a countdown and I want to call a specific function called endTimer() when the timer has ended inside my @Component without using setTimeout(). I can check the value of counter == 0 in the view but how do I check in the @Component import { Component } from ‘@angular/core’; import { IonicPage, NavController, NavParams, ModalController } from ‘ionic-angular’; import { Storage } from ‘@ionic/storage’; import { Observable } […]

Next Page »