input要素で入力した時、エンターキーでsubmitできれば便利だと思います。ただ日本語の場合、単純にエンターだけを拾うと、文字変換する際のエンターでイベント着火してしまいます。

加えてAngularでは日本語変換を検知する簡単な方法は無さそうで、自前で一工夫する必要があります。

以下はその実装例です。

[html]

<div>
  <input [formControl]="yourForm" (keydown.enter)="onSubmit($event)"/>
</div>
<div>
  <button (click)="onCancel()">キャンセル</button>
  <button (click)="onSubmit($event)">提出</button>
</div>

[ts]

public onSubmit(event: any): void {
  // 日本語変換時のEnter(keyCode=229)なら何もせず、submitのEnter(keyCode=13)なら処理を実行する
  if (event.keyCode && event.keyCode !== 13) {
    return;
  }
  処理を記載;
}

public onCancel(): void {
  キャンセル処理を記載;
}

onSubmit()がエンターで実行したい処理で、上記の実装だと①入力完了後にエンターを押した際と、②「提出」ボタンをクリックした際の2つで実行できます。

以下の処理が肝で、

if (event.keyCode && event.keyCode !== 13)

eventがkeyCodeを持つ時、それが13（submitのkeycode）以外ならpassします。

htmlで

(keydown.enter)="onSubmit($event)"

としていますが、keydownの場合、日本語変換のEnterのkeycodeは229となり、上記のif文でpassされます。

これがkeyupだと、日本語変換のEnterでもkeycodeが13になってしまうので、keydownで実装する必要がある点に注意です。

ここまでお読みいただきありがとうございました！

参考