Wie man ionische Form mit dem ions-footer Absendenknopf einreicht? Ich versuche dies http://play.ionic.io/app/07e251b1e926

Question

Ich habe eine FORM innerhalb Ion-Inhalt und ich möchte diese FORM von der Schaltfläche in Ion-Footer mit allen Form Validierungen übergeben. Struktur des Codes bei http://play.ionic.io/app/07e251b1e926,

Aber es löst nicht submit event.Anyone hat das getan?

Answer 1

Versuchen Sie dies, Label außerhalb Formular als Schaltfläche hinzufügen und versteckte Schaltfläche in Form auch hinzufügen.

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

dann Fußzeile Label for Attribut geben stellen Sie die button id in Form

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

Controller umfassen sollte auch [formController] auch außerhalb Form.

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

Answer 2

Mit der neuesten Version von Ionic-Ionen-footer Sie Ihre Form wieder in den Footer-Tags hinzufügen müssen. Footer sollte nach Ionengehalt dicht sein. Ich habe das getan und jetzt kann mein Formular hinter der Fußzeile scrollen und hat ein zusätzliches Item-Wert von Polsterung an der Unterseite!

<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

können Sie diesen Code in ionic2 verwenden:

<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>