angular2送信ボタンなしでenterを押してフォームを送信

Question

Enterボタンを押して送信ボタンを持たないフォームを送信することは可能ですか？

<form [ngFormModel]="xxx" (ngSubmit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form

Answer 1

あるいは、入力フィールドにkeypressまたはkeydownを追加して、enterをクリックしたときに送信を実行する関数にイベントを割り当てます。

テンプレートはこのようになります

<form (keydown)="keyDownFunction($event)">
  <input type="text" />
</form

そして、あなたはあなたのクラスの中で機能することはこのようになるでしょう

keyDownFunction(event) {
  if(event.keyCode == 13) {
    alert('you just clicked enter');
    // rest of your code
  }
}

Answer 2

(keyup.enter)="xxxx()"を追加することもできます

Answer 3

編集：

  <form (submit)="submit()" >
    <input />
    <button type="submit" style="display:none">hidden submit</button>
  </form>

この方法を使用するには、「Thanks to Toolkit's answer 」と表示されていなくても送信ボタンが必要です。

古い答え：

はい、イベント名が(submit)ではなく(ngSubmit)であることを除いて、あなたが書いたとおりです。

<form [ngFormModel]="xxx" (submit)="xxxx()">
  <input [(ngModel)]="lxxR"   ngControl="xxxxx"/>
</form>

Answer 4

カーソルが(keydown.enter)="mySubmit()"内のどこかにあっても末尾にはなかった場合には改行が追加されないため、<textarea>が好きです。

Answer 5

この方法はとても簡単です...

<form [formGroup]="form" (keyup.enter)="yourMethod(form.value)">

</form>

Answer 6

遅れを避けるために、keyup.enterの代わりに常にkeydown.enterを使用してください。

<textarea [(ngModel)]="textValue" (keydown.enter)="sendMessage();false" ></textarea>

そしてcomponent.tsの中の機能

 textValue : string = '';  
 sendMessage() {
    console.log(this.textValue);
    this.textValue = '';
  }

Answer 7

単に(keyup.enter)="yourFunction()"を追加するだけです

Answer 8

目に見えない送信ボタンを追加するとうまくいく

<input type="submit" style="display: none;">

Answer 9

うまくいけば、これは誰かに役立つことができます：何らかの理由であなたがのようなフォームを持っている場合、私は時間がないために追跡することができませんでした：

<form (ngSubmit)="doSubmit($event)">
  <button (click)="clearForm()">Clear</button>
  <button type="submit">Submit</button>
</form>

Enterボタンを押すと、予想される動作はclearForm関数を呼び出すことでしたが、doSubmit関数が呼び出されます。 Clearボタンを<a>タグに変更することで問題は解決しました。私はまだそれが予想されるかどうか知りたいのですが。私を混乱させるようです

Answer 10

これをあなたの入力タグの中に追加してください

<input type="text" (keyup.enter)="yourMethod()" />

Answer 11

両方を含めたい場合 - 入力時に受け入れてクリック時に受け入れてから行う -

 <div class="form-group">
    <input class="form-control"   type="text" 
    name="search" placeholder="Enter Search Text"
              [(ngModel)]="filterdata"  
           (keyup.enter)="searchByText(filterdata)">
  <button type="submit"  
          (click)="searchByText(filterdata)" >

  </div>

Answer 12

ここに表示されているものよりも単純なbothを含めたい場合は、ボタンをフォームの中に含めるだけで可能です。

メッセージを送信する関数の例

                <form>
                    <mat-form-field> <!-- In my case I'm using material design -->
                        <input matInput #message maxlength="256" placeholder="Message">
                    </mat-form-field>
                    <button (click)="addMessage(message.value)">Send message
                    </button>
                </form>

ボタンをクリックするか、Enterキーを押すかを選択できます。