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

Question

在我的Ionic 3应用程序中，当我从移动键盘上单击go按钮时，我想提交一个表单。

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

Answer 1

为此，您需要在表单内添加button类型的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>

        <!-- The button should be inside of the form -->
        <button type="submit">Login</button>

    </form>
</ion-content>

请注意这一行：

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

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

public onSubmit(): void {
  // ...
  // ...
}

---

如果出于某种原因（基于应用程序的UI / UX），您需要将该按钮放在form元素之外，您可以使用以下技巧：在表单内添加隐藏按钮，类型为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>

        <!-- 
            Hidden button to make the GO button submit the form, 
            since the button is in the footer (outside the form tag) 
        -->
        <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>