Как отправить форму, нажав клавишу Enter из любого поля формы в Angular Material?

Я хочу отправить форму, нажав клавишу ввода, не нажимая кнопку обновления после редактирования любого поля и включения кнопки обновления, как показано ниже на снимке экрана.

Эта форма обновления представляет собой диалоговое окно, которое открывается при нажатии функции редактирования в строке таблицы. введите здесь описание изображения

Случай: Теперь форма редактируется в поле Emp Code и оно выделено, поэтому по нажатию клавиши ввода эта форма должна быть отправлена.

Ниже приведен пример кода формы обновления в 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>

Я пробовал какой-то подход, но не работал, как ожидалось.

 <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>

Заранее спасибо за любую помощь в этом.


person Santosh_shar    schedule 09.09.2020    source источник
comment
Не похоже, что вы сами пробовали какое-либо решение, мы не собираемся писать ваш код за вас.   -  person Ian Kemp    schedule 09.09.2020
comment
@ Ян Кемп, я пробовал несколько вариантов, но не сработало. stackoverflow.com/questions/55334027/   -  person Santosh_shar    schedule 09.09.2020


Ответы (1)


вы должны иметь возможность просто привязаться к событию ngSubmit:

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

чтобы это сработало, вам нужен элемент типа отправки где-то внутри вашей формы, хотя он может быть скрыт:

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

или, если хотите, вы можете просто привязаться к событию keyup.enter в форме:

<form class="example-form" [formGroup]="docForm" (keyup.enter)="docForm.valid && docForm.dirty && update()">
person bryan60    schedule 09.09.2020
comment
спасибо за ваше предложение, но это (ngSubmit)=docForm.valid && docForm.dirty && update() также не отправляет форму при нажатии клавиши ввода - person Santosh_shar; 09.09.2020
comment
ngSubmit срабатывает при нажатии клавиши ввода, когда фокус находится на любом поле в форме, пока форма действительна. дважды проверьте, что форма действительна. - person bryan60; 09.09.2020
comment
Привет, Брайан, ngSubmit не срабатывает при нажатии клавиши ввода, как я проверил для разных полей. - person Santosh_shar; 09.09.2020
comment
Я забыл, что ngSubmit не работает, когда в форме нет элемента отправки... вы можете добавить скрытую кнопку отправки внутри формы где-нибудь <input [style.display]="'none'" type="submit"> или вы можете привязать (keyup.enter) вместо (ngSubmit) к элементу form - person bryan60; 09.09.2020
comment
Спасибо, Брайан, после ввода этого ‹input [style.display]='none' type=submit›. Это сработало сейчас. - person Santosh_shar; 09.09.2020
comment
Привет, Брайан, не могли бы вы предложить какое-нибудь решение для этой проверки -box-or-dr" title="как остановить распространение при нажатии клавиши ввода из поля даты или флажка dr"> stackoverflow.com/questions/63845236/ - person Santosh_shar; 11.09.2020