Hello,
I have a form but want to use the enter key on his keyboard to go to the next field.
Can anyone help me?
The current code I have is this:
HTML
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Add Item</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<form #f="ngForm" (ngSubmit)="onAdd(f)">
<ion-list>
<ion-item>
<ion-label floating>Name</ion-label>
<ion-input type="text" [(ngModel)]=itemForm.name name="name" required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Category</ion-label>
<ion-input type="text" [(ngModel)]=itemForm.category name="category" required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Enter a description</ion-label>
<ion-textarea [(ngModel)]=itemForm.description name="description" fz-elastic></ion-textarea>
</ion-item>
</ion-list>
<ion-row>
<ion-col>
<button ion-button block type="submit" [disabled]="!f.valid">Add item</button>
</ion-col>
<ion-col>
<button ion-button block type="button" (click)="onCancel()">Cancel</button>
</ion-col>
</ion-row>
</form>
</ion-content>
TYPESCRIPT
import { ItemService } from './../../services/Item';
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { ElasticModule } from 'angular2-elastic';
import { NgForm } from "@angular/forms"
@IonicPage()
@Component({
selector: 'page-new-item',
templateUrl: 'new-item.html',
})
export class NewItemPage {
itemForm = {
name: '',
category: '',
description: ''
};
constructor(
private navCtrl: NavController,
private itemService: ItemService
) {}
onAdd(form: NgForm) {
this.itemService.addItem(form.value.name, form.value.category, form.value.description);
this.navCtrl.popToRoot();
}
onCancel() {
this.navCtrl.popToRoot();
}
}