Question

在我的Ionic 3应用程序中，当我从手机键盘点击 go按钮时，我想提交一份表格。

当我点击移动键盘上的转到按钮时，我想触发一个事件或调用一个函数。

Answer 1

为此，您需要在表单的中添加submit类型<ion-header> <ion-navbar> <ion-title>My Form</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form (ngSubmit)="onSubmit()" [formGroup]="myForm"> <ion-list> <ion-item> <ion-label stacked>Email</ion-label> <ion-input formControlName="email" type="email"></ion-input> </ion-item> <ion-item> <ion-label stacked>Password</ion-label> <ion-input formControlName="password" type="password"></ion-input> </ion-item> </ion-list>  <button type="submit">Login</button> </form> </ion-content> ，并处理提交事件。

<form (ngSubmit)="onSubmit()" [formGroup]="myForm">

请注意这一行：

onSubmit()

基本上，当用户点击该按钮或键盘上的 GO 按钮时，我们告诉Angular执行public onSubmit(): void { // ... // ... }方法。

form

如果出于某种原因（基于应用的UI / UX），您需要将{strong>放在<{1}}元素的按钮之外，您可以使用以下技巧：添加表单内的隐藏按钮，类型为submit。

<ion-header> <ion-navbar> <ion-title>My Form</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form (ngSubmit)="onSubmit()" [formGroup]="myForm"> <ion-list> <ion-item> <ion-label stacked>Email</ion-label> <ion-input formControlName="email" type="email"></ion-input> </ion-item> <ion-item> <ion-label stacked>Password</ion-label> <ion-input formControlName="password" type="password"></ion-input> </ion-item> </ion-list>  <button type="submit" style="visibility: hidden;width: 1px;height: 1px;padding: 0;margin: 0;"></button> </form> </ion-content> <ion-footer no-border> <ion-toolbar> <button (tap)="onSubmit()" ion-button block text-only> Login </button> </ion-toolbar> </ion-footer>

现在，用户将使用页脚中的按钮，但隐藏按钮将允许用户在使用键盘上的 GO 按钮时提交表单。

Answer 2

Here is the solution 
**code for HTML file**

    enter code here

    <form (ngSubmit)="onUserLogin()" [formGroup]="myForm">
    <ion-item no-padding transparent>
    <ion-label floating>{{data.username}}</ion-label>
    <ion-input required type="text" [(ngModel)]="username" formControlName="text" autocapitalize='off'></ion-input>
    </ion-item>
    <!---Input field password-->
    <ion-item no-padding transparent>
    <!--<ion-icon name="lock"></ion-icon>-->
    <ion-label floating>{{data.password}}</ion-label>
    <ion-input required type="password" [(ngModel)]="password" formControlName="password"></ion-input>
    </ion-item>

    <!-- Remember me check box -->
    <ion-item no-padding transparent no-lines>
    <ion-label class="rememberme">{{data.remember}}</ion-label>
    <ion-toggle [(ngModel)]="checkbox" formControlName="checkbox" ></ion-toggle>
    </ion-item>
    <button [disabled]="!myForm.valid" type="submit" style="visibility: hidden;width: 1px;height: 1px;padding: 0;margin: 0;"></button>
    </form>

**code for ts file**

    enter code here
import {Validators, FormBuilder, FormGroup } from '@angular/forms';

    @IonicPage()
    @Component({
      selector: 'page-login',
      templateUrl: 'login.html',
    })

export class LoginPage {
  private myForm : FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    public platform: Platform,
) {
    this.myForm = this.formBuilder.group({
      text: [''],
      password: [''],
      checkbox: ['']
    });

onUserLogin = function () {
//Enter your code 
}
}

Answer 3

不需要复杂的按钮类型，简单的按钮就足够了，您只需要将所有输入和按钮包装在标签内即可。

Answer 4

您应在<form>之间添加此标签：

<input type="submit" hidden>

点击Ionic 3框架中的go按钮后如何提交表单？

4 个答案: