Angular Form does not submit on enter when not focused

Question

I have some Angular 6 forms and I focus on the first available field. They contain a submit button and when I press enter, the form is submitted automatically and the ngSubmit event is triggered.

There is one particular form which only contains a radio group, and I am not focusing on any field. In this case, ngSubmit is not triggered.

If I click on a radio button and then press enter, the form submits correctly.

Is there any way of making the form submit on enter even if none of the fields within the form are focused? Should I focus on the form itself somehow?

Form:

<form (ngSubmit)="onSubmit()" [formGroup]="form">
    <mat-radio-group [formControl]="control" name="test">
        <mat-radio-button *ngFor="let option of options" [value]="option.key">
        {{option.value}}
        </mat-radio-button>
    </mat-radio-group>
    <button>Submit</button>
</form>

Stackblitz: https://stackblitz.com/edit/angular-arcwjv?file=src/app/app.component.html

In my specific use case of editing inline with a Kendo grid, I found that my Kendo grid was missing the [navigable]=true flag, which prevented the enter key from being used for form submit. Hope this helps someone else. — RMorrisey

Patricio Vargas Patricio Vargas · Accepted Answer · 2018-09-26T07:45:05

Always specify the type attribute for the element. Different browsers may use different default types for the element.

submit = The button is a submit button (submits form-data)

<button type="submit" >Submit</button>

Angular Form does not submit on enter when not focused

2 Answers