I have created a form, in the form I have a button
<form #f='ngForm' (ngSubmit)='onAddBusiness(f)' >
....
....
<ion-item>
<button ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
<p *ngIf="(position==undefined); else elseblock">
هیچ شوێنێک دیاری نەکراوە
</p>
<ng-template #elseblock>
<p #elseblock>
دەست خۆش شوێنەکە دیاری کرا
</p>
</ng-template>
</ion-item>
<ion-item>
<button type='submit' ion-button block [disabled]="!f.valid">ناردن</button>
</ion-item>
</ion-list>
</form>
the button is present a Modal to set the location on a map.
The issue is whenever I click the Button to open the modal, the form is submitted.
In the button to open modal, specify the type as button.
<button type='button' ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
Related
I would like to create tabs like these on a page:
As you see Voortgang and pijnniveau are my tabs in the page itself but if I set them like this:
export class ProgressPage {
tab1Root = HomePage;
tab2Root = SchemaPage;
and than in my html template do this:
<ion-header>
<ion-navbar color="light">
<ion-title>{{viewTitle}}</ion-title>
<ion-buttons end>
<button ion-button [disabled]="isToday" (click)="today()">Today</button>
<button ion-button (click)="changeMode('month')">M</button>
<button ion-button (click)="changeMode('week')">W</button>
<!--<button ion-button (click)="changeMode('day')">D</button>-->
<button ion-button (click)="loadEvents()">Load Events</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>-->
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>
<ion-list inset>
<ion-list-header>{{ viewTitle }}</ion-list-header>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
</ion-list>
</ion-content>
<ion-tabs color="light" tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab>
</ion-tabs>
But this will looks like this, you see the tabRoot pages under the active page:
How can I fix this?
Kindly go to your app.componet.ts file and set the rootPage to ProgressPage. (If this is the opening screen of your app)
If you are using a login screen or if you are navigating from another screen to this screen, then ensure that you are pushing the ProgressPage in the navCtrl.
Hope this helps you. Thanks.
I want to disable buttons when fields are empty.
Template:
<ion-content padding text-center class="product">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price"></ion-input>
</ion-item>
<button ion-button block (click)="checkPrice()" [disabled]="!(product.price && product.productName) ? true : null">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!(product.price && product.productName) ? true : null">Добавить в чек</button>
When I run this on browser - data binding works fine.
when I run this on device - data binding does not work:
I think you can do this using <form> and required in <ion-input> like:
<ion-content padding text-center class="product">
<form #demoForm="ngForm">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName" required></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price" required></ion-input>
</ion-item>
</form>
<button ion-button block (click)="checkPrice()" [disabled]="!demoForm.form.valid">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!demoForm.form.valid">Добавить в чек</button>
Just an example. You need to check other parts/conditions in your code if you have any.
I am developing a Mobile App using the Ionic2-Framework along with Angular2.
In a section of my app, I have several <ion-slides> with <ion-item><ion-input ...></ion-input></ion-item> on the slides.
When changing the slide, the keyboard opens up without actively touching one of the input-fields. So far, I could only test it on iOS, but I found out that it only happens for type="tel"-inputs
Is there a way to prevent the app from doing this, as I would like the users to choose the time to input by themselves.
The code of my page looks like that:
(I excluded some parts for readability)
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle [hidden]="showBackButton">
<ion-icon color="primary" name="menu"></ion-icon>
</button>
<button color="light" ion-button icon-only [hidden]="!showBackButton" (click)="goToPreviousSlide()">
<ion-icon color="primary" name="arrow-back"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides (ionSlideDidChange)="updateShowBackButton()">
<!-- Some more slides... -->
<ion-slide style="background-color: white" padding>
<h2 class="slide-title">Hello {{person.name}}!</h2>
<p>Now I need this and that information:/p>
<ion-item>
<ion-label>Day</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.day"></ion-input>
</ion-item>
<ion-item>
<ion-label>Month</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.month"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.year"></ion-input>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Height (cm)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.height"></ion-input>
</ion-item>
<ion-item>
<ion-label>Weight: (kg)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.weight"></ion-input>
</ion-item>
<button ion-button block (click)="goToNextSlide()">Next</button>
</ion-slide>
<!-- Some more slides... -->
</ion-slides>
</ion-content>
If you need futher information, please let me know! I am appreciating any hints! :)
I want the <ion-select> of a ionic form to look like a <button>.
Here is my html template:
<form (ngSubmit)="doSubmit()" [formGroup] = "myForm" >
<ion-item>
<!-- <button ion-button block> -->
<ion-select type="text" formControlName="choose" placeholder = "choose">
<ion-option value=1>option 1</ion-option>
<ion-option value=2>option 2</ion-option>
</ion-select>
<!-- </button> -->
</ion-item>
// ... other input fields + doSubmit() function ...
</form>
As it is, it works and I can manage the selection. But I want it to look like a button. So I added some tag <button ion-button block></button> around the <select> tags. If the <button> tags are uncommented, it does not work: It does not show as a button and the select functionnaly is dead. Also I naively expected it would execute as I had wished it, but it doesn't.
Has anyone an idea?
Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)