Search code examples
androidionic-frameworkcapacitor

Next button on Android keyboard not submitting form

I have an email and password inputs and a submit button. When I focus on the first input I get the next button on the keyboard and this moves to the password input. On the password input the button shows slightly differently (see images).

I am using Reactive Forms to validate the input.
I would expect it to submit the form when I press this next button (in the bottom right) while on the password input but it does not.

I have tried quite a few things and can't find anything on here to help.

enter image description here enter image description here

Code:

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

  • you can use (keyup.enter)

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


submitLogin()
{
handle your submit
}