angular2 форму подання натисканням клавіші Enter без кнопки подання

Чи можна надіслати форму, яка не містить кнопки для надсилання (натисканням клавіші Enter):

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

Для того, щоб скористатися цим методом, потрібно мати кнопку подання, навіть якщо вона не відображається "Дякую за відповідь 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>

і функціонує всередині компонента.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>

Ви можете вибрати між натисканням на кнопку або натисканням клавіші Enter.

Якщо ви хочете включити і те, і інше - прийняти при введенні і прийняти при натисканні, тоді зробіть -

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