Angularjs 如何使用ion页脚提交按钮提交ion表单？我正在尝试这个http://play.ionic.io/app/07e251b1e926

我在Ion内容中有一个表单，我想通过Ion页脚中的按钮提交该表单以及所有表单验证。代码的结构在

---

但它不会触发提交事件。有人这样做了吗？

试试这个，在表单外部添加标签作为按钮，并在表单内部添加隐藏按钮

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

还应包括表单外部的控制器[

formController

]

---

使用最新版本的Ionic ion footer，您需要在footer标签中再次添加表单。页脚应在内容关闭后。我这样做了，现在我的表单可以滚动到页脚后面，并且在底部有一个额外的填充项

新项目
项目名称
拯救

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

电子邮件
密码
登录

这就是帮助我在爱奥尼亚3，FormBuilder上进行验证的原因

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

电子邮件
密码
登录

如果您使用FormBuilder而不是ngModel，这可能是一个更好的选择

将此代码放在装入.ts文件的表单后面

this.signForm.statusChanges
        .subscribe(status => this.formIsValid = status);

在.html文件中，您可以像这样检查表单是否有效

<button ion-button round large color="secondary" float-right [disabled]="!formIsValid" (click)="onSubmit()">Save</button>

保存

我知道这是个老问题，但我认为最好的办法是：

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

姓名：
提交

只想在Ionic 4中添加它，这也起作用。只想添加此方法在Ionic 4中也起作用请注意，

表单

是HTML5的一个属性。

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