Prevent form submission on enter key

Question

How can I prevent the enter key from submitting the form in angular?

Is there a way to catch the 13 key and disable it or set the form as invalid unless submitting f

Answer 1

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

I'm waiting for better answers, won't 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's here. Does nothing.                     
          }
        });
      });
    };
});

and trigger it by using this on all form inputs:

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

For now, whenever the user press the enter key, the window try to submit, then fail to do so, not so silently. Ugly but it works.

Edit: keydown is a little better than keyup for the element bind, now enter key fails silently-ish

Answer 2

You can catch the default form submit in your controller using ng-submit on the form tag and it will prevent a submit:

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

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

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

Answer 3

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

I hope this helps.

Answer 4

I came across this issue. Yes, you would need to remove all type='submit' from your page, and make sure any other buttons have type="button" but then the challenge is still being able to use normal validation submission.

I created a directive that triggers form submission + form states for validation. Replacing:

<button type="submit">

with

<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 still hit ENTER to submit when focused on your submit-button, better for UX and Accessibility I think.

Answer 5

Since you have ng-click anyways, you could also use <button type="button">, even inside the form tag. The default behaviour of the button element is type="submit", which is what you want to prevent. So, no javascript needed at all!

Answer 6

The following should work . . . i.e., the form is only submitted on button click, and not on hitting Enter in the Input boxes. (This definitely works for reactive forms. I didn't test it 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 the imports 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() { }

}