Prevent form submission when entering a key

Question

How can I prevent the input of an input key in an angular form?

Is there a way to catch the key 13 and disable it, or set the form as invalid if not sent using the button with identifier x?

thank

Answer 1

Since you have ng-click, you can also use <button type="button"> , even inside the form tag. The default behavior of a button element is type="submit" , which you want to prevent. Thus, no JavaScript is needed at all!

Answer 2

Other users have already written that [button type = "submit"] will cause this problem. PLEASE NOTE: the buttons WITHOUT EVERY type = "..." are the "submit" declaration by default! So make sure you always use type = "button".

Answer 3

After a couple of hours, this weird code was the only thing that worked.

I am waiting for the best answers, I will not accept this monster:

 app.directive('onKeyup', function() { return function(scope, elm, attrs) { var allowedKeys = scope.$eval(attrs.keys); elm.bind('keydown', function(evt) { angular.forEach(allowedKeys, function(key) { if (key == evt.which) { evt.preventDefault(); // Doesn't work at all window.stop(); // Works in all browsers but IE document.execCommand("Stop"); // Works in IE return false; // Don't even know why it here. Does nothing. } }); }); }; }); 

and run it using this for all form inputs:

 <input on-keyup="bla" keys="[13]" .... /> 

Now, whenever the user presses the enter key, the window tries to send, and then does not do it, not so quietly. Ugly, but it works.

Edit : keydown is slightly better than keyup to bind an element, now enter the fail silent-ish key

Answer 4

If you are trying to prohibit form submission on only one element, you can add the following ng-keypress handler (this is for Angular 1.x):

 <input type="text" name="myField" ng-keypress="keyPressHandler($event)"/> 

With the following implementation for keyPressHandler :

 $scope.keyPressHandler = function(e) { if (e.keyCode === 13) { e.preventDefault(); e.stopPropagation(); // Perform your custom logic here if any } } 

Answer 5

I had a similar problem, I ended up pulling the button out of the form. Seeing how I use ng-click and everything is tied to ng-model , it does not really matter if it is inside the form or not.

I understand that this is bad practice, but of course, damn it, writing a special directive to intercept keystrokes.

Answer 6

Mark this :

if the form has 2+ input fields and no buttons or input [type = submit] then clicking the button does not start submit

Thus, if your form has 2+ input fields, you can use something like <span ng-click="submit()">Sumbit</span> to prevent the key from being entered into these input fields.

Answer 7

so simple, no need to do anything. just add this to your form tag if you use angular +2

 <form (keydown.enter)="$event.preventDefault()" ...> 

Answer 8

I ran into this problem. Yes, you will need to remove the entire type = 'submit' from your page and make sure that any other buttons are of type = "button", but then the call can still use the usual send confirmation.

I created a directive that runs the form submission + form state for validation. Replacement:

 <button type="submit"> 

from

 <button submit-button type="button"> 

Directive

 export default /*@ngInject*/ function submitButton($log) { return ({ require: '^form', link: link, restrict: 'A' }); function link(scope, element, attributes, formCtrl) { element.on('click', clickHandler); function clickHandler() { formCtrl.$setDirty(true); formCtrl.$setSubmitted(true); angular.element(element[0].form).triggerHandler('submit'); $log.info('Form Submitted'); } } 

You can press ENTER to submit when you focus on your submit button, better for UX and accessibility, I think.

Answer 9

You can catch the default submit form in your controller using ng-submit in the form tag and this will prevent the submission:

http://docs.angularjs.org/api/ng.directive:ngSubmit

alternatively, if you really wanted to catch key events, there are also directives for those that send an event that you can call stop:

http://docs.angularjs.org/api/ng.directive:ngKeyup

Answer 10

The easiest solution I found is to use the input type as a button instead of submitting and link the form submit function with ng-click and not use ng-submit in the form tag.

Hope this helps.

Answer 11

This is my weird but quick and easy solution without any directives.

HTML:

  <form ng-submit='submitForm()'> <input type='text'> <button type='submit' ng-mousedown='doSubmit=true'>submit</button> </form> 

Controller:

  $scope.submitForm = function() { if (!$scope.doSubmit) { return; } $scope.doSubmit = false; console.log('execute some actions'); } 

Answer 12

 angular.element(document).ready(function () { angular.element(window).keydown(function () { if(event.keyCode == 13) { event.preventDefault(); return false; } }); }); 

Try this with the angularjs controller

Answer 13

The form is entered when you press the enter key, while the control on the form has focus. If you register a listener using ng-submit, you can intercept this and use the default ban to stop the default process (i.e., submitting the form). Look at

Answer 14

The following should work., That is, the form is sent only when the button is pressed, and not when Enter pressed in the input fields. (This definitely works for reactive forms. I have not tested this for template forms).

 <form #form [formGroup]="form" METHOD="GET" action="http://localhost:3000/test"> <input placeholder="Enter"/> <input placeholder="The Dragon"/> <button type="button" (click)="form.submit()">Submit</button> </form> 

Of course, remember all import and declarations:

app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ . . . FormsModule, ReactiveFormsModule ] . . . }) export class AppModule { } 

test.component.ts

 import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'] }) export class TestComponent { form: FormGroup = new FormGroup({}); constructor() { } } 

Answer 15

Try setting the variable when you click the submit button and verify that it has been set on the submit form.

 $scope.click = function () { $scope.clicked = true; $scope.submit(); }; $scope.submit = function () { if ($scope.clicked) { ... submit } else { ... prevent defaults } $scope.clicked = false; }; 

See jsfiddle