angular2 отправить форму, нажав клавишу ввода без кнопки отправки

Можно ли отправить форму, в которой нет кнопки отправки (путем нажатия Enter), пример:

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

возможно, вы добавляете keypressили keydownв поля ввода и назначаете событие функции, которая будет выполнять отправку при нажатии ввода

ваш шаблон будет выглядеть так

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

Чтобы использовать этот метод, у вас должна быть кнопка отправки, даже если она не отображается "Спасибо за ответ Toolkit "

Старый ответ:

Да, именно так, как вы написали, только (submit)вместо названия события (ngSubmit):

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

Я предпочитаю, (keydown.enter)="mySubmit()"потому что не будет добавлен разрыв строки, если курсор находился где-то внутри, <textarea>но не на его конце.

Это очень просто ...

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

</form>

Всегда используйте keydown.enter вместо keyup.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()" />

(keyup.enter)="methodname()"

это должно работать и уже упоминалось во многих ответах, однако это должно присутствовать в теге формы, а не на кнопке.

добавление невидимой кнопки отправки делает свое дело

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

Просто добавьте (keyup.enter)="yourFunction()"

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

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

Вы можете выбрать между нажатием кнопки или нажатием клавиши ввода.

Если вы хотите включить оба - примите при вводе и примите при нажатии, затем сделайте -

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