Pressing the submit button within a form in Ionic2 triggers the Ion-Input onSubmit event

In my form, there is an ion-button and an ion-input included.

The ion-button is not meant for submitting the form. When I try to edit a value in the input field and press "ok", I expect the keyboard to hide. However, the ion-button reacts to this event and triggers its onClick action.

You can see a demo of this issue in this Plunkr (home.html/ts) by pressing enter inside the input element. I simply want to prevent the gotoSelectedView function from being triggered.


       <form [ngFormModel]="form">
            <ion-list>
                <ion-item>
                    <ion-label floating>Username</ion-label>
                    <ion-input ngControl="username" type="text"></ion-input>
                </ion-item>

                <ion-item>
                    <ion-label floating>Password</ion-label>
                    <ion-input ngControl="password" type="password"></ion-input>
                </ion-item>
                  <button ion-item  (click)="gotoSelectView()">
                      <ion-label >SelectItem</ion-label>
                      <ion-note item-right>SelectedValue</ion-note>
                  </button>
            </ion-list>
        </form>

Thank you in advance!

javascriptiosangularjsionic2

Answer №1

I successfully resolved the issue by including a listener in the form for keydown.enter in my main.html file:

 <form [ngFormModel]="form" (keydown.enter)="hideKeyboard($event)">
        <ion-list>
            <ion-item>
                <ion-label floating>Username</ion-label>
                <ion-input ngControl="username" type="text"></ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating>Password</ion-label>
                <ion-input ngControl="password" type="password"></ion-input>
            </ion-item>
              <button ion-item  (click)="gotoSelectView()">
                  <ion-label >SelectItem</ion-label>
                  <ion-note item-right>SelectedValue</ion-note>
              </button>
        </ion-list>
    </form>

In my main.ts file:

  hideKeyboard(event) {
    event.preventDefault();
    Keyboard.close();
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the React component life cycle: Understanding the distinction between render and return, and what happens post-return

This question pertains to the concepts surrounding react component life cycles. Below is an example code snippet provided as a general reference. const Modal = ({ className, variant, width, withCloseIcon, isOpen: propsIsOpen, onClose: tellParen ...

javascriptreactjsreact-hooksreact-functional-component

The MaterialTable is unable to display any data

After calling the fetch function in the useEffect, my getUsers function does not populate the data variable. I am unable to see rows of data in the MaterialTable as the data structure is in columns. I need help figuring out what I'm doing wrong. func ...

javascriptreactjsmaterial-uimaterial-table

Utilize load-grunt-configs and run bower.install() with grunt

I have been attempting to break down my current Gruntfile into smaller parts for better clarity. However, I have encountered a hurdle while using bower.install to manage project dependencies. My directory structure appears as follows: package.json bower.j ...

javascriptnode.jsgruntjsbower

Use Javascript to set cookies and remember the show state when clicked

Can you offer some advice? I am looking to add cookies to my simple JavaScript code. Currently, the div is displayed when clicking on a link, but it hides again when the page reloads. I would like to implement cookies to remember the show state for 7 days. ...

javascriptjqueryhtmlcsscookies

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

$(document).ready(function () { $("#end").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function () { var start = $('#start'); var startDate = $(this).datepicker('getDate') ...

javascriptcssajaxtwitter-bootstrap

What is the best way to accomplish this ng-repeat task?

I have an array of objects that looks like this: $scope.list = [ { id : 1, value : "one"}, { id : 2, value : "two"}, { id : 3, value : "three"} ]; I would like to display a dropdown list as follows: <select&g ...

angularjs

Using NicEdit for uploading to your personal server

I'm having trouble uploading images using the NicEdit WYSIWYG editor on my own server. When I click on the upload image button, it redirects me to another site where I can upload the image: imgur dot com You can find a demo of this here: However, I ...

phpjavascriptajaxnicedit

A viewless Angular 2 component

Is it feasible to utilize Angular 2 without the need for a template or an @View? I am exploring alternative methods akin to the example shown below: Angular 1 index.html <div ng-controller="appcontroller"> <div ng-class="{active: isActive()}"& ...

javascripthtmlangularjstypescriptangular

Struggling to get this bootstrap carousel up and running

I can't seem to get this bootstrap carousel to switch slides, whether I use the indicators or arrows. My other carousel works perfectly fine and I've added all necessary Bootstrap and JavaScript CDNs. I'm puzzled as to why it's not func ...

javascriptreactjsbootstrap-4next.js

What is the reason for not using constants for events in the Node.js programming language?

Although I am new to node.js, my programming background is extensive. I have noticed that in tutorials and production code, developers tend to use hard-coded strings rather than constants to identify events. To illustrate this point, I randomly selected a ...

javascriptnode.jsdesign-patternsconstantshardcoded

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

javascriptjqueryajaxhtml

Is it possible to have an icon change color in a TableRow column when hovering over any part of that particular row?

I am currently using material-ui version 4.9.5. To illustrate my issue, I have created a simplified example here. I have a Table that is populated with basic JSON data. Each row in the table consists of an icon element along with its corresponding color a ...

javascripthtmlcssreactjsmaterial-ui

Are there any alternatives to Yeoman/Yo for generating AngularJS scaffolds?

Like many others, I am experiencing issues with the Yeoman scaffold/generator on my Windows 10 machine. Despite working fine a few months ago, now when I run the commands, I encounter errors and no files are generated. On another machine, the "yo" comman ...

angularjsgenerator

If a specific class is identified, add a border to the div when clicked using JavaScript

Is there a way to use javascript/jquery to add a border to a selected div? I have multiple rows with columns, and I want only one column per row to be highlighted with a border when clicked. Each row should have one column with a border, so it's clear ...

javascriptjquerycssborderaddition

Changing the sliding underline effect in a jQuery navigation bar

Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/e ...

javascriptjqueryhtmlcss

Using Typescript to pass a property as one of the keys in an object's list of values

In my React Native project, I need to pass a string value from one component to another. The different options for the value can be found in the ScannerAction object: export const ScannerAction = { move: 'move', inventory: 'inventory&apo ...

javascriptreactjstypescriptparameter-passing

Utilizing React for handling data exchange between child and parent components

I am still learning about React and material-ui, and I am exploring how to pass data from a child component to a parent component to update the parent state. Currently, when I try to update the state with a new date, it is being logged in the console but t ...

javascriptreactjsecmascript-6material-ui

Utilizing JavaScript to manage sections within a dropdown menu

When dealing with this particular HTML code, there is a feature where a list item includes options such as all, a, b, c, and d. If the user selects 'All', it should restrict them from choosing any other items. However, if they do not choose &apos ...

javascript

Consistently encountering the error message "(0 , _reactDom.h) is not a function" or "h is not defined"

I'm currently in the process of developing an app that makes use of electron, react, redux, and several other technologies. At the moment, I have included electron, react, electron-compile, and babel in the project. Redux is installed but has not been ...

javascriptreactjselectron

Preventing an event from bubbling up to its parent in a jQuery Ajax call: A step-by-step guide

I am working on a page that showcases a tree list using unordered lists. Each li element with children triggers an ajax call to fetch those children and display them as another ul/li combination, which is functioning correctly. However, the problem arise ...

javascriptjqueryajax