I have a simple reactive form :
<ion-content>
<form [formGroup]="contactForm" (ngSubmit)="submit()">
<ion-item>
<ion-label>MM DD YY</ion-label>
<ion-datetime displayFormat="MM DD YY" placeholder="Select Date" [min]="minDate" (ionChange)="getScheduleDate($event)" formControlName="scheduleDate" name="scheduleDate"></ion-datetime>
</ion-item>
<ion-button color="primary" type="submit">Submit</ion-button>
</form>
</ion-content>
On click of Submit, it refresh the page. Anyone suggestion pls for this. I don't want click event in button.
Remove type="submit" from the ion-button. Then the click event will not fire.
Related
am developing a web application in ionic. I have a login form. If I click the login button form is submitting and working fine. Now I am looking for after entering the email and password i click enter button then the form should submit. If i click the enter button form should submit. Here is the code.
<form [formGroup]="loginForm">
<ion-item>
<ion-input type="email" required class="textWidth" formControlName="email" placeholder="Email id"></ion-input>
</ion-item>
<ion-item>
<ion-input type="password" class="textWidth" formControlName="password" placeholder="Password"></ion-input>
</ion-item>
<div class="text-center">
<ion-button type="submit" (click)="Login()" class="signinButton">Sign in</ion-button>
</div>
</form>
Can you please help me with this?
Thanks & Regards
You can use it
(keyup.enter)="onSubmit(loginForm.value)"
Move the (click)="login()" function to the form like this (ngSubmit)="login()"
This should trigger the function on pressing the enter key if there is no other form.
I have a list of items in my app. This is the code
<ion-list>
<ion-item-sliding #item *ngFor="let productSize of productSizes">
<ion-item>
... some stuff
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="RemoveItem(productSize)">X</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
When the user slides left, there is a button delete that shows up and lets the user to delete the item.
I want to do this without the remove button. When he slides left and releases the mouse or touch, delete the item.
You can use the expandable option combined with the (ionSwipe) event.
So your options will look like this:
<ion-item-options side="right" (ionSwipe)="RemoveItem(productSize)">
and your button:
<button ion-button color="danger" expandable (click)="RemoveItem(productSize)">X</button>
Check out the docs here (under Expandable Options).
I have the following:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Add new</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="ion-backdrop" padding>
<form [formGroup]="form1" class="form" (ngSubmit)="onSubmit(form1.value)">
<ion-card>
<ion-list>
<ion-item>
<ion-label>Available:</ion-label>
<ion-datetime displayFormat="MMM DD YYYY" formControlName="dateAvailableFormControl">
</ion-datetime>
</ion-item>
</ion-list>
</ion-card>
</form>
</ion-content>
and my ts code is:
this.dateAvailableFormControl.setValue(this.data.DateAvailable);
where this.data.DateAvailable is Date type.
I cannot see anything when page loads. All other bindings work fine except from the ion-datetime.
Does anyone knows why this happens?
Thanks in advance
I think I found what was the problem. Dont know if this is a bug of ionic 2 or is how it works with ng2.
My Date value was
2016-11-29T09:15:48.8579573Z
as soon as I change it to:
2016-11-29T09:15:48.857Z
it worked.
i have a few buttons in my app's screen and i want use Icon and below of that, write the title of the button...
in ionic 2 i can't use "< br>" or h1,h2 or even display block for this purpose.
code:
<button primary>
<ion-icon name="calendar"></ion-icon>
Calendar
</button>
i tried like this:
<button primary>
<h1>
<ion-icon name="calendar"></ion-icon>
</h1>
<br />
<h2>
Calendar
</h2>
</button>
thanks
You wont have a choice but to use sass. I'm not answering your question but are you sure you want it this way ??
You can do it this way ?
<button large >
<ion-icon name='home' class="breakme"></ion-icon>
Home
</button>
Or you can have lists with onclicks (click)="calendar" and fake it with a list?
<ion-list no-lines>
<ion-item (click)="getData()">
<ion-icon name="leaf"></ion-icon>
<br />
Herbology
</ion-item>
<ion-item (click)="getData()">
<ion-icon name="add"></ion-icon>
<br />
Calander
</ion-item>
</ion-list>
ok, I found a solution... Thank you Justin Willis
Instead of using extra html inside your button you can actually achieve this with just a touch of css. You can simply change the button-inner class to have a flex-flow of column. So you could just use something like this
.button-inner {
flex-flow: column;
}
Below is the template code to a page in my app. You can see that I am using the ion-nav-bar. I would like to disable the ion-nav-bar on the login screen and to not have a back button to go back to the login screen.
The best solution I can come up with is to remove <ion-nav-bar> from the login page and add an ng-show directive to <ion-nav-back-button> that tests if the previous page is login and hides the tag in that case.
Is there any better design pattern for this?
<ion-view view-title="Sales">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-content class="padding">
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
</ionic-datepicker>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Amount" ng-model="data.amount">
</label>
</div>
<button class="button button-block button-stable" ng-click="enter()">Save</button>
</ion-content>
</ion-nav-bar>
</ion-pane>
</ion-view>
To your ion-view, you need to add the hide-nav-bar directive and set it to true to hide it on this page.
Like so
<ion-view hide-nav-bar="true">
This will hide the whole nav-bar when you enter the view
For hiding back button just add this tag to your view just like this
<ion-view title="Login" hide-back-button="true">