Android键盘上的下一步按钮未提交表单答案

【问题标题】：Next button on Android keyboard not submitting formAndroid键盘上的下一步按钮未提交表单
【发布时间】：2019-08-16 13:07:30
【问题描述】：

我有一个电子邮件和密码输入以及一个提交按钮。当我专注于第一个输入时，我得到键盘上的下一个按钮，这将移至密码输入。在密码输入按钮显示略有不同（见图）。

我正在使用响应式表单来验证输入。
我希望它在输入密码时按下下一个按钮（右下角）时提交表单，但事实并非如此。

我已经尝试了很多东西，但在这里找不到任何帮助。

代码：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" #formCtrl="ngForm">
      <ion-grid>
        <ion-row class="row-padding-one"></ion-row>
        <ion-row>
          <ion-col size-sm="6" offset-sm="3" class="input-col">
            <ion-item class="custom-item" lines="none">
              <ion-input 
                class="login-input"
                type="text"
                formControlName="email"
                [formControl]="loginForm.controls['email']"
                placeholder="E-Mail"
                required>
              </ion-input>
              <div *ngFor="let validation of loginValidationMessages.email">
                <div class="error-message"
                 *ngIf="loginForm.get('email').hasError(validation.type) && loginForm.get('email').touched">
                  {{validation.message}}</div>
              </div>
            </ion-item>

            <ion-item class="custom-item" lines="none">
              <ion-input
                class="login-input"
                type="password"
                formControlName="password"
                placeholder="Password"
                required
              ></ion-input>
              <div *ngFor="let validation of loginValidationMessages.password">
                <div class="error-message" 
                  *ngIf="loginForm.get('password').hasError(validation.type) && loginForm.get('password').touched">
                  {{validation.message}}</div>
              </div>
            </ion-item> 
          </ion-col>
        </ion-row>
        <ion-row class="button-row">
          <ion-col size-sm="6" offset-sm="3">
            <ion-button
              class="btn-login"
              type="submit"
              color="primary"
              expand="block">Login
            </ion-button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </form>

【问题讨论】：

标签： android ionic-framework capacitor

【解决方案1】：

你可以使用(keyup.enter)

 <ion-input
 class="login-input"
 type="password"
 formControlName="password"
 placeholder="Password"
 required
 (keyup.enter)="submitLogin()">
 </ion-input>


submitLogin()
{
handle your submit
}

【讨论】：

是否有任何通用或更好的方法来处理单个表单？在这种情况下，我们需要把它放在每个离子输入中

【解决方案2】：

我得到了这个解决方案来让它工作，但它有点小技巧，如果有更好的解决方案，我们将不胜感激。

添加到 .ts

  @HostListener('document:keydown', ['$event'])

  docs(event) {
    // This is a hack to submit the form on Android
    if (event.keyCode === 13) {
      this.onSubmit();
    }
  }

【讨论】：