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