如何使用ion-footer提交按鈕提交離子形式？我正在嘗試這個http://play.ionic.io/app/07e251b1e926

Question

我在離子內容中有一個FORM，我想從位於Ion-footer內部的按鈕提交FORM，並進行所有的表單驗證。代碼結構http://play.ionic.io/app/07e251b1e926,

但它不會觸發提交事件。任何人都這樣做？

Answer 1

試試這個，在窗體外添加標籤作爲按鈕，並在窗體內添加隱藏按鈕。

<form name="myform" ng-submit="submitmyform()" > 
     <input type="submit" id="submit" value="Submit" style="display:none"/> 

然後頁腳標籤給for屬性集的形式

<a href="#"><label style="width:100%;heigh:30px;background-color:red" for="submit">Submit</label></a> 

另外，button ID應包括控制器[formController]之外的形式也。

http://play.ionic.io/app/0e22c14ea697

Answer 2

使用最新版本，你需要頁腳標籤中再次添加您的形成離子的離子尾的。頁腳應該在離子內容關閉後。我這樣做了，現在我的表單可以在頁腳後面滾動，並在底部有一個額外的項目值填充！

<ion-header> 
 
    <ion-navbar> 
 
    <ion-title>New Project</ion-title> 
 
    </ion-navbar> 
 
</ion-header> 
 

 
<ion-content> 
 
    <form [formGroup]="newProjectForm" (submit)="addProject()" novalidate> 
 
\t <ion-list> 
 
\t <ion-item> 
 
\t  <ion-label color="primary" stacked>Project Title</ion-label> 
 
\t  <ion-input formControlName="title" clearInput></ion-input> 
 
\t </ion-item> 
 
\t </ion-list> 
 
    </form> 
 
</ion-content> 
 

 
<ion-footer> 
 
    <form [formGroup]="newProjectForm" (submit)="addProject()" novalidate> 
 
\t <ion-toolbar> 
 
\t <button ion-button block color="green" type="submit"> 
 
\t  Save 
 
\t </button> 
 
\t </ion-toolbar> 
 
    </form> 
 
</ion-footer>

Answer 3

您可以在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>