1

I want to submit the form by pressing enter key without clicking on update button once any field is edited and update button gets enabled as below in the screenshot.

This update form is a dialog which opens up on click of edit functionality on a row of the table. enter image description here

Case: Now form is edited on Emp Code field and it's highlighted, so on click of enter key this form should be submitted.

Below is code sample of update form in HTML.

<mat-card-content>
    <form class="example-form" [formGroup]="docForm">
      <table>
        <tr>
          .
          .
          <td>
            <mat-form-field appearance="outline">
              <mat-label>Emp Code</mat-label>
              <input matInput name="empCode" formControlName="empCd" maxLength = "4" >
            </mat-form-field>
          </td>
         .
         .
       </tr>
      </table>
    </form>
</mat-card-content>

<button mat-raised-button style="width: 95px;" color="primary" [disabled]='docForm.invalid || !docForm.dirty (click)="update()"> Update </button>

I tried some approach, but not working as expected.

 <button mat-raised-button (keyup.enter)="!($event.target.tagName == 'TEXTAREA' || $event.target.tagName == 'BUTTON')" 
  style="width: 95px;" color="primary" [disabled]='docForm.invalid || !docForm.dirty' (click)="update()"> Update </button>

Thanks in advance for any help on this.

Santosh_shar
  • 39
  • 1
  • 9
  • It doesn't seem like you've attempted any solution yourself, we are not going to write your code for you. – Ian Kemp Sep 09 '20 at 15:20
  • @Ian Kemp , i tried few options but didn't work. https://stackoverflow.com/questions/55334027/submitting-a-form-by-pressing-enter-key-in-angular-4 – Santosh_shar Sep 09 '20 at 17:01

1 Answers1

7

you should be able to just bind to the ngSubmit event:

<form class="example-form" [formGroup]="docForm" (ngSubmit)="docForm.valid && docForm.dirty && update()">

for this to trigger, you need a submit type element somewhere inside your form, it may be hidden though:

<input [style.display]="'none'" type="submit">

or if you prefer, you may just bind to the keyup.enter event on the form:

<form class="example-form" [formGroup]="docForm" (keyup.enter)="docForm.valid && docForm.dirty && update()">
bryan60
  • 28,215
  • 4
  • 48
  • 65
  • thanks for your suggestion but this (ngSubmit)="docForm.valid && docForm.dirty && update()" also doesn't submit the form on click of enter key – Santosh_shar Sep 09 '20 at 17:23
  • `ngSubmit` does trigger on enter key when focused on any field in the form so long as the form is valid. double check that the form is valid. – bryan60 Sep 09 '20 at 17:24
  • Hi bryan, ngSubmit is not triggering on enter key as I verified for different fields. – Santosh_shar Sep 09 '20 at 18:06
  • I forgot `ngSubmit` doesn't work when there's no submit element in the form... you can add a hidden submit button inside the form somewhere `` or you can bind to `(keyup.enter)` instead of `(ngSubmit)` on the `form` element – bryan60 Sep 09 '20 at 18:18
  • Thanks bryan, after putting this . It's worked now. – Santosh_shar Sep 09 '20 at 18:34
  • Hi bryan, could you suggest some solution for this https://stackoverflow.com/questions/63845236/how-to-stop-propagation-when-pressing-enter-key-from-date-field-check-box-or-dr – Santosh_shar Sep 11 '20 at 13:06