How to submit ionic form with the ion-footer submit button? I am trying this http://play.ionic.io/app/07e251b1e926 - angularjs

Question

I have a FORM inside Ion-content and I want to submit that FORM from the button placed inside Ion-footer with all the form validations. Structure of the code at http://play.ionic.io/app/07e251b1e926,
But It is not triggering submit event.Anyone has done this?

Answer 1

Try this, Add label outside form as button and add hidden button inside form also.
<form name="myform" ng-submit="submitmyform()" >
<input type="submit" id="submit" value="Submit" style="display:none"/>
then footer label give for attribute set thebutton id in the form
<label style="width:100%;heigh:30px;background-color:red" for="submit">Submit</label>
Also Should include controller [formController] outside form also.
http://play.ionic.io/app/0e22c14ea697

Answer 2

Using the latest version of Ionic ion-footer you need to add your form again within the footer tags. Footer should be after ion-content close. I did this and now my form can scroll behind the footer and has an extra item-worth of padding at the bottom!
<ion-header>
<ion-navbar>
<ion-title>New Project</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form [formGroup]="newProjectForm" (submit)="addProject()" novalidate>
<ion-list>
<ion-item>
<ion-label color="primary" stacked>Project Title</ion-label>
<ion-input formControlName="title" clearInput></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<form [formGroup]="newProjectForm" (submit)="addProject()" novalidate>
<ion-toolbar>
<button ion-button block color="green" type="submit">
Save
</button>
</ion-toolbar>
</form>
</ion-footer>

Answer 3

This is what helped me on ionic 3, FormBuilder with validation.
<ion-content padding>
<form (ngSubmit)="login()" #loginForm="ngForm">
<ion-list>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" [(ngModel)]="form.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="form.password" name="password"></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button block full large clear [disabled]="!loginForm.form.valid" (click)="loginForm.ngSubmit.emit()">Login</button>
</ion-toolbar>
</ion-footer>

Answer 4

you can use this code in ionic2:
<ion-content>
<form (ngSubmit)="login()" #loginForm="ngForm">
<ion-list>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="text" [(ngModel)]="form.email" name="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" [(ngModel)]="form.password" name="password"></ion-input>
</ion-item>
</ion-list>
</form>
</ion-content>
<ion-footer>
<button ion-button full (click)="loginForm.ngSubmit.emit()">Login</button>
</ion-footer>

Answer 5

Maybe this is a better alternative if you are using FormBuilder instead of ngModel.
Put this code after the form crated in your .ts file.
this.signForm.statusChanges
.subscribe(status => this.formIsValid = status);
In the .html file you can check if the form is valid like this.
<button ion-button round large color="secondary" float-right [disabled]="!formIsValid" (click)="onSubmit()">Save</button>

Answer 6

I know is old question, but the best way i see:
<div>
<form id="my-form">
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<!-- ... -->
<button type="submit" form="my-form">Submit</button>
</div>