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

Question

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

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

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

代码：

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

Answer 1

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

添加到 .ts

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

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

Answer 2

你可以使用(keyup.enter)

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


submitLogin()
{
handle your submit
}

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

Next button on Android keyboard not submitting form

android

ionic-framework

capacitor