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

送信ボタンのないフォームを送信することは可能ですか？

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

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

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

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

そして、あなたのクラスの内部で機能すると、このようになります

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

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

編集：

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

この方法を使用するためには、あなたはそれが「のおかげで表示されていない場合でも、送信ボタンを持っている必要がありますツールキットの答えを」

古い答え：

はい、あなたが書いたとおりですが、イベント名が次の(submit)代わりになってい(ngSubmit)ます：

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

(keydown.enter)="mySubmit()"カーソルがaのどこかにある<textarea>が最後ではない場合、改行が追加されないので、私は好みます。

この方法は非常に簡単です...

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

</form>

遅れを避けるために、常にkeyup.enterではなくkeydown.enterを使用してください。

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

そして、component.ts内で機能します

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

これを入力タグ内に追加します

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

非表示の送信ボタンを追加するのがコツ

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

追加するだけ (keyup.enter)="yourFunction()"

(keyup.enter)="methodname()"

これは機能し、すでに多くの回答で言及されていますが、ボタンではなくフォームタグに存在する必要があります。

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

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

あなたがヒットしたときにEnter、ボタンを、clearForm機能が期待されるふるまいを呼び出すことだったにも関わらず、呼び出されたdoSubmit関数。Clearボタンを<a>タグに変更すると、問題が解決しました。それが予想されるかどうか、私はまだ知りたいです。私を混乱させるようです

私がここで見たものよりも両方を単純に含めたい場合は、フォーム内にボタンを含めるだけでそれを行うことができます。

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

                <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キーを押すかを選択できます。

両方を含める場合-Enterで受け入れるとClickで受け入れると、

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